@veltra/compositions 1.2.10 → 1.2.12

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 (9) hide show
  1. package/dist/use-component-props/index.js.map +1 -1
  2. package/dist/use-config/index.js.map +1 -1
  3. package/dist/use-drag/index.js.map +1 -1
  4. package/dist/use-model/index.js.map +1 -1
  5. package/dist/use-pop/index.js.map +1 -1
  6. package/dist/use-reactive-size/index.js.map +1 -1
  7. package/dist/use-resize-observer/index.js.map +1 -1
  8. package/dist/use-transition/use-style-transition.js.map +1 -1
  9. package/package.json +6 -6
package/dist/use-component-props/index.js.map CHANGED
@@ -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;CACX,OAAO,gBAAgB;EACrB,MAAM;EACN,cAAc;EAEd,OAAO;;AAEL,KAAK,EAAE,MAAM,OAAO,EACtB;EAEA,MAAM,gBAAgB,EAAE,OAAO,SAAS;GACtC,MAAM,aAAa,MAAM,KAAK;GAE9B,MAAM,aAAa,aAAa,OAAO,OAAO,KAAK,KAAK;GAExD,MAAM,mBAAmB,gBAAqC;IAC5D,MAAM,QAAQ,oBAAoB,MAAM,UAAU,KAAK,CAAC,CAAC;IACzD,IAAI,CAAC,OAAO,QAAQ,OAAO,KAAA;IAE3B,MAAM,OAAO,cAAc,OAAO,KAAK,WAAW;IAClD,OAAO,MAAM,KAAK,SAAS;KACzB,MAAM,cAAmC,CAAC;KAC1C,IAAI,QAAQ;KACZ,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;MACpC,MAAM,MAAM,KAAK;MAEjB,IAAI,KAAK,QAAQ,SAAS,KAAA,GAAW;MACrC,YAAY,OAAO,MAAM,SAAS,KAAA,IAAY,MAAM,OAAO,YAAY;MACvE;KACF;KACA,OAAO,QAAQ,IAAI,WAAW,MAAM,WAAW,IAAI;IACrD,CAAC;GACH;GAEA,aAAa;IACX,MAAM,SAAS,aAAa,MAAM,QAAQ;IAC1C,MAAM,QAAQ,gBAAgB,MAAM;IAEpC,IAAI,eAAe,KAAK;KACtB,IAAI,CAAC,OAAO,OAAO,KAAA;KACnB,MAAM,WAAW,OAAO,KAAK,KAAK,EAAE,QAA6B,KAAK,QAAQ;MAC5E,IAAI,EAAE,OAAO,SACX,IAAI,OAAO,MAAM;MAEnB,OAAO;KACT,GAAG,CAAC,CAAC;KACL,OAAO,YAAY,eAAe,KAAK,UAAU,KAAK;IACxD;IACA,OAAO;GACT;EACF;CACF,CAAC;AACH"}
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;CACX,OAAO,gBAAgB;EACrB,MAAM;EACN,cAAc;EAEd,OAAO;;AAEL,KAAK,EAAE,MAAM,OAAO,EACtB;EAEA,MAAM,gBAAgB,EAAE,OAAO,SAAS;GACtC,MAAM,aAAa,MAAM,KAAK;GAE9B,MAAM,aAAa,aAAa,OAAO,OAAO,KAAK,KAAK;GAExD,MAAM,mBAAmB,gBAAqC;IAC5D,MAAM,QAAQ,oBAAoB,MAAM,UAAU,KAAK,CAAC,CAAC;IACzD,IAAI,CAAC,OAAO,QAAQ,OAAO,KAAA;IAE3B,MAAM,OAAO,cAAc,OAAO,KAAK,WAAW;IAClD,OAAO,MAAM,KAAK,SAAS;KACzB,MAAM,cAAmC,CAAC;KAC1C,IAAI,QAAQ;KACZ,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;MACpC,MAAM,MAAM,KAAK;MAEjB,IAAI,KAAK,QAAQ,SAAS,KAAA,GAAW;MACrC,YAAY,OAAO,MAAM,SAAS,KAAA,IAAY,MAAM,OAAO,YAAY;MACvE;KACF;KACA,OAAO,QAAQ,IAAI,WAAW,MAAM,WAAW,IAAI;IACrD,CAAC;GACH;GAEA,aAAa;IACX,MAAM,SAAS,aAAa,MAAM,QAAQ;IAC1C,MAAM,QAAQ,gBAAgB,MAAM;IAEpC,IAAI,eAAe,KAAK;KACtB,IAAI,CAAC,OAAO,OAAO,KAAA;KACnB,MAAM,WAAW,OAAO,KAAK,KAAK,CAAC,CAAC,QAA6B,KAAK,QAAQ;MAC5E,IAAI,EAAE,OAAO,SACX,IAAI,OAAO,MAAM;MAEnB,OAAO;KACT,GAAG,CAAC,CAAC;KACL,OAAO,YAAY,eAAe,KAAK,UAAU,KAAK;IACxD;IACA,OAAO;GACT;EACF;CACF,CAAC;AACH"}
package/dist/use-config/index.js.map CHANGED
@@ -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 | string\n }\n paginator: { pageSize: number; pageSizeOptions: number[] }\n}\n\nconst state = reactive<State>({\n animation: true,\n size: 'default',\n form: { labelWidth: 100 },\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;EAAI;CAAE;AACxE,CAAC;AAED,SAAgB,gBAAgB,MAAqB,SAA+B;CAClF,IAAI,OAAO,aAAa,aAAa;CACrC,IAAI,SACF,SAAS,gBAAgB,UAAU,OAAO,OAAO;CAEnD,SAAS,gBAAgB,UAAU,IAAI,IAAI;AAC7C;AAEA,IAAI,uBAA4C;AAEhD,SAAS,yBAA+B;CACtC,IAAI,sBAAsB;CAC1B,IAAI,OAAO,aAAa,aAAa;CAErC,uBAAuB,YACf,MAAM,OACX,MAAM,YAAY,gBAAgB,MAAM,OAAO,CAClD;AACF;AAEA,SAAS,QAAQ,UAA+B,QAA6B;CAC3E,OAAO,KAAK,MAAM,EAAE,SAAS,QAAQ;EACnC,MAAM,MAAM,SAAS;EACrB,MAAM,YAAY,OAAO;EACzB,IAAI,MAAM,GAAG,GACX,IAAI,MAAM,SAAS,GACjB,QAAQ,KAAK,SAAS;OAEtB,QAAQ,KAAK,WAAW,IAAI,UAAU;OAGxC,SAAS,OAAO;CAEpB,CAAC;AACH;AAEA,SAAgB,YAGd;CACA,uBAAuB;CACvB,OAAO;;EAEL,QAAQ,SAAS,KAAK;;;;;EAKtB,UAAU,MAAsB;GAC9B,QAAQ,OAAO,IAAI;EACrB;CACF;AACF"}
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 | string\n }\n paginator: { pageSize: number; pageSizeOptions: number[] }\n}\n\nconst state = reactive<State>({\n animation: true,\n size: 'default',\n form: { labelWidth: 100 },\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;EAAI;CAAE;AACxE,CAAC;AAED,SAAgB,gBAAgB,MAAqB,SAA+B;CAClF,IAAI,OAAO,aAAa,aAAa;CACrC,IAAI,SACF,SAAS,gBAAgB,UAAU,OAAO,OAAO;CAEnD,SAAS,gBAAgB,UAAU,IAAI,IAAI;AAC7C;AAEA,IAAI,uBAA4C;AAEhD,SAAS,yBAA+B;CACtC,IAAI,sBAAsB;CAC1B,IAAI,OAAO,aAAa,aAAa;CAErC,uBAAuB,YACf,MAAM,OACX,MAAM,YAAY,gBAAgB,MAAM,OAAO,CAClD;AACF;AAEA,SAAS,QAAQ,UAA+B,QAA6B;CAC3E,OAAO,KAAK,MAAM,CAAC,CAAC,SAAS,QAAQ;EACnC,MAAM,MAAM,SAAS;EACrB,MAAM,YAAY,OAAO;EACzB,IAAI,MAAM,GAAG,GACX,IAAI,MAAM,SAAS,GACjB,QAAQ,KAAK,SAAS;OAEtB,QAAQ,KAAK,WAAW,IAAI,UAAU;OAGxC,SAAS,OAAO;CAEpB,CAAC;AACH;AAEA,SAAgB,YAGd;CACA,uBAAuB;CACvB,OAAO;;EAEL,QAAQ,SAAS,KAAK;;;;;EAKtB,UAAU,MAAsB;GAC9B,QAAQ,OAAO,IAAI;EACrB;CACF;AACF"}
package/dist/use-drag/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../src/use-drag/index.ts"],"sourcesContent":["import { type Ref, type ShallowRef, watch, onBeforeUnmount } from 'vue'\n\ninterface DragParams {\n /** 本次拖动水平距离 */\n x: number\n /** 本次拖动垂直距离 */\n y: number\n /** 拖拽目标水平偏移量 */\n offsetX: number\n /** 拖拽目标垂直偏移量 */\n offsetY: number\n /** 鼠标事件 */\n e: MouseEvent\n}\n\ninterface DragOptions {\n /** 拖动目标 */\n target: ShallowRef<HTMLElement | undefined | null> | Ref<HTMLElement | undefined | null>\n /** 拖动开始 */\n onDragStart?(e: MouseEvent): void\n /** 拖动结束 */\n onDragEnd?(params: DragParams): void\n /** 拖动时 */\n onDrag?(params: DragParams): void\n /** 水平拖动范围 */\n rangeX?: [number, number]\n /** 垂直拖动范围 */\n rangeY?: [number, number]\n /** 初始偏移量 */\n initial?: { offsetX?: number; offsetY?: number }\n}\n\n/**\n * 拖动组合式方法\n * @param options 拖动选项\n */\nexport function useDrag(options: DragOptions): {\n update: (options: { offsetX?: number; offsetY?: number }) => void\n} {\n const { target, onDragStart, onDrag, onDragEnd, rangeX, rangeY, initial } = options\n\n // 鼠标拖拽前的坐标\n let originX = 0\n let originY = 0\n\n let offsetX = initial?.offsetX ?? 0\n let offsetY = initial?.offsetY ?? 0\n\n // 拖拽参数\n const dragParams: DragParams = { x: 0, y: 0, offsetX: 0, offsetY: 0, e: null as any }\n\n // 先取\n const onselectstart = document.onselectstart\n\n const handleMousedown = (e: MouseEvent) => {\n e.stopPropagation()\n if (e.button !== 0) return\n window.getSelection()?.removeAllRanges()\n e.stopImmediatePropagation()\n\n originX = e.x\n originY = e.y\n\n onDragStart?.(e)\n\n // 禁止浏览器的选中事件, 直到mouseup事件触发时还原\n document.onselectstart = () => false\n document.addEventListener('mousemove', handleMousemove, { passive: true })\n document.addEventListener('mouseup', handleMouseup)\n }\n\n const getOffsetXWithRange = (deltaX: number) => {\n return Math.max(rangeX![0], Math.min(rangeX![1], offsetX + deltaX))\n }\n\n const getOffsetXWithoutRange = (deltaX: number) => {\n return offsetX + deltaX\n }\n\n const getOffsetYWithRange = (deltaY: number) => {\n return Math.max(rangeY![0], Math.min(rangeY![1], offsetY + deltaY))\n }\n\n const getOffsetYWithoutRange = (deltaY: number) => {\n return offsetY + deltaY\n }\n\n const getOffsetX = rangeX ? getOffsetXWithRange : getOffsetXWithoutRange\n const getOffsetY = rangeY ? getOffsetYWithRange : getOffsetYWithoutRange\n\n // 避免重复创建对象影响内存占用\n const setDragParam = (e: MouseEvent) => {\n dragParams.x = e.x - originX\n dragParams.y = e.y - originY\n dragParams.offsetX = getOffsetX(dragParams.x)\n dragParams.offsetY = getOffsetY(dragParams.y)\n dragParams.e = e\n }\n\n const handleMousemove = (e: MouseEvent) => {\n setDragParam(e)\n onDrag?.(dragParams)\n }\n\n const handleMouseup = (e: MouseEvent) => {\n setDragParam(e)\n offsetX = dragParams.offsetX\n offsetY = dragParams.offsetY\n\n onDragEnd?.(dragParams)\n document.onselectstart = onselectstart\n\n cleanup()\n }\n\n // 统一的清理函数\n const cleanup = () => {\n document.removeEventListener('mousemove', handleMousemove)\n document.removeEventListener('mouseup', handleMouseup)\n }\n\n watch(\n target,\n (dom, oldDom) => {\n oldDom?.removeEventListener('mousedown', handleMousedown)\n if (!dom) return\n dom.addEventListener('mousedown', handleMousedown)\n },\n { immediate: true }\n )\n\n onBeforeUnmount(() => {\n target.value?.removeEventListener('mousedown', handleMousedown)\n cleanup()\n })\n\n return {\n update(options: { offsetX?: number; offsetY?: number }) {\n if (options.offsetX !== undefined) {\n offsetX = options.offsetX\n }\n if (options.offsetY !== undefined) {\n offsetY = options.offsetY\n }\n }\n }\n}\n"],"mappings":";;;;;;AAoCA,SAAgB,QAAQ,SAEtB;CACA,MAAM,EAAE,QAAQ,aAAa,QAAQ,WAAW,QAAQ,QAAQ,YAAY;CAG5E,IAAI,UAAU;CACd,IAAI,UAAU;CAEd,IAAI,UAAU,SAAS,WAAW;CAClC,IAAI,UAAU,SAAS,WAAW;CAGlC,MAAM,aAAyB;EAAE,GAAG;EAAG,GAAG;EAAG,SAAS;EAAG,SAAS;EAAG,GAAG;CAAY;CAGpF,MAAM,gBAAgB,SAAS;CAE/B,MAAM,mBAAmB,MAAkB;EACzC,EAAE,gBAAgB;EAClB,IAAI,EAAE,WAAW,GAAG;EACpB,OAAO,aAAa,GAAG,gBAAgB;EACvC,EAAE,yBAAyB;EAE3B,UAAU,EAAE;EACZ,UAAU,EAAE;EAEZ,cAAc,CAAC;EAGf,SAAS,sBAAsB;EAC/B,SAAS,iBAAiB,aAAa,iBAAiB,EAAE,SAAS,KAAK,CAAC;EACzE,SAAS,iBAAiB,WAAW,aAAa;CACpD;CAEA,MAAM,uBAAuB,WAAmB;EAC9C,OAAO,KAAK,IAAI,OAAQ,IAAI,KAAK,IAAI,OAAQ,IAAI,UAAU,MAAM,CAAC;CACpE;CAEA,MAAM,0BAA0B,WAAmB;EACjD,OAAO,UAAU;CACnB;CAEA,MAAM,uBAAuB,WAAmB;EAC9C,OAAO,KAAK,IAAI,OAAQ,IAAI,KAAK,IAAI,OAAQ,IAAI,UAAU,MAAM,CAAC;CACpE;CAEA,MAAM,0BAA0B,WAAmB;EACjD,OAAO,UAAU;CACnB;CAEA,MAAM,aAAa,SAAS,sBAAsB;CAClD,MAAM,aAAa,SAAS,sBAAsB;CAGlD,MAAM,gBAAgB,MAAkB;EACtC,WAAW,IAAI,EAAE,IAAI;EACrB,WAAW,IAAI,EAAE,IAAI;EACrB,WAAW,UAAU,WAAW,WAAW,CAAC;EAC5C,WAAW,UAAU,WAAW,WAAW,CAAC;EAC5C,WAAW,IAAI;CACjB;CAEA,MAAM,mBAAmB,MAAkB;EACzC,aAAa,CAAC;EACd,SAAS,UAAU;CACrB;CAEA,MAAM,iBAAiB,MAAkB;EACvC,aAAa,CAAC;EACd,UAAU,WAAW;EACrB,UAAU,WAAW;EAErB,YAAY,UAAU;EACtB,SAAS,gBAAgB;EAEzB,QAAQ;CACV;CAGA,MAAM,gBAAgB;EACpB,SAAS,oBAAoB,aAAa,eAAe;EACzD,SAAS,oBAAoB,WAAW,aAAa;CACvD;CAEA,MACE,SACC,KAAK,WAAW;EACf,QAAQ,oBAAoB,aAAa,eAAe;EACxD,IAAI,CAAC,KAAK;EACV,IAAI,iBAAiB,aAAa,eAAe;CACnD,GACA,EAAE,WAAW,KAAK,CACpB;CAEA,sBAAsB;EACpB,OAAO,OAAO,oBAAoB,aAAa,eAAe;EAC9D,QAAQ;CACV,CAAC;CAED,OAAO,EACL,OAAO,SAAiD;EACtD,IAAI,QAAQ,YAAY,KAAA,GACtB,UAAU,QAAQ;EAEpB,IAAI,QAAQ,YAAY,KAAA,GACtB,UAAU,QAAQ;CAEtB,EACF;AACF"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../src/use-drag/index.ts"],"sourcesContent":["import { type Ref, type ShallowRef, watch, onBeforeUnmount } from 'vue'\n\ninterface DragParams {\n /** 本次拖动水平距离 */\n x: number\n /** 本次拖动垂直距离 */\n y: number\n /** 拖拽目标水平偏移量 */\n offsetX: number\n /** 拖拽目标垂直偏移量 */\n offsetY: number\n /** 鼠标事件 */\n e: MouseEvent\n}\n\ninterface DragOptions {\n /** 拖动目标 */\n target: ShallowRef<HTMLElement | undefined | null> | Ref<HTMLElement | undefined | null>\n /** 拖动开始 */\n onDragStart?(e: MouseEvent): void\n /** 拖动结束 */\n onDragEnd?(params: DragParams): void\n /** 拖动时 */\n onDrag?(params: DragParams): void\n /** 水平拖动范围 */\n rangeX?: [number, number]\n /** 垂直拖动范围 */\n rangeY?: [number, number]\n /** 初始偏移量 */\n initial?: { offsetX?: number; offsetY?: number }\n}\n\n/**\n * 拖动组合式方法\n * @param options 拖动选项\n */\nexport function useDrag(options: DragOptions): {\n update: (options: { offsetX?: number; offsetY?: number }) => void\n} {\n const { target, onDragStart, onDrag, onDragEnd, rangeX, rangeY, initial } = options\n\n // 鼠标拖拽前的坐标\n let originX = 0\n let originY = 0\n\n let offsetX = initial?.offsetX ?? 0\n let offsetY = initial?.offsetY ?? 0\n\n // 拖拽参数\n const dragParams: DragParams = { x: 0, y: 0, offsetX: 0, offsetY: 0, e: null as any }\n\n // 先取\n const onselectstart = document.onselectstart\n\n const handleMousedown = (e: MouseEvent) => {\n e.stopPropagation()\n if (e.button !== 0) return\n window.getSelection()?.removeAllRanges()\n e.stopImmediatePropagation()\n\n originX = e.x\n originY = e.y\n\n onDragStart?.(e)\n\n // 禁止浏览器的选中事件, 直到mouseup事件触发时还原\n document.onselectstart = () => false\n document.addEventListener('mousemove', handleMousemove, { passive: true })\n document.addEventListener('mouseup', handleMouseup)\n }\n\n const getOffsetXWithRange = (deltaX: number) => {\n return Math.max(rangeX![0], Math.min(rangeX![1], offsetX + deltaX))\n }\n\n const getOffsetXWithoutRange = (deltaX: number) => {\n return offsetX + deltaX\n }\n\n const getOffsetYWithRange = (deltaY: number) => {\n return Math.max(rangeY![0], Math.min(rangeY![1], offsetY + deltaY))\n }\n\n const getOffsetYWithoutRange = (deltaY: number) => {\n return offsetY + deltaY\n }\n\n const getOffsetX = rangeX ? getOffsetXWithRange : getOffsetXWithoutRange\n const getOffsetY = rangeY ? getOffsetYWithRange : getOffsetYWithoutRange\n\n // 避免重复创建对象影响内存占用\n const setDragParam = (e: MouseEvent) => {\n dragParams.x = e.x - originX\n dragParams.y = e.y - originY\n dragParams.offsetX = getOffsetX(dragParams.x)\n dragParams.offsetY = getOffsetY(dragParams.y)\n dragParams.e = e\n }\n\n const handleMousemove = (e: MouseEvent) => {\n setDragParam(e)\n onDrag?.(dragParams)\n }\n\n const handleMouseup = (e: MouseEvent) => {\n setDragParam(e)\n offsetX = dragParams.offsetX\n offsetY = dragParams.offsetY\n\n onDragEnd?.(dragParams)\n document.onselectstart = onselectstart\n\n cleanup()\n }\n\n // 统一的清理函数\n const cleanup = () => {\n document.removeEventListener('mousemove', handleMousemove)\n document.removeEventListener('mouseup', handleMouseup)\n }\n\n watch(\n target,\n (dom, oldDom) => {\n oldDom?.removeEventListener('mousedown', handleMousedown)\n if (!dom) return\n dom.addEventListener('mousedown', handleMousedown)\n },\n { immediate: true }\n )\n\n onBeforeUnmount(() => {\n target.value?.removeEventListener('mousedown', handleMousedown)\n cleanup()\n })\n\n return {\n update(options: { offsetX?: number; offsetY?: number }) {\n if (options.offsetX !== undefined) {\n offsetX = options.offsetX\n }\n if (options.offsetY !== undefined) {\n offsetY = options.offsetY\n }\n }\n }\n}\n"],"mappings":";;;;;;AAoCA,SAAgB,QAAQ,SAEtB;CACA,MAAM,EAAE,QAAQ,aAAa,QAAQ,WAAW,QAAQ,QAAQ,YAAY;CAG5E,IAAI,UAAU;CACd,IAAI,UAAU;CAEd,IAAI,UAAU,SAAS,WAAW;CAClC,IAAI,UAAU,SAAS,WAAW;CAGlC,MAAM,aAAyB;EAAE,GAAG;EAAG,GAAG;EAAG,SAAS;EAAG,SAAS;EAAG,GAAG;CAAY;CAGpF,MAAM,gBAAgB,SAAS;CAE/B,MAAM,mBAAmB,MAAkB;EACzC,EAAE,gBAAgB;EAClB,IAAI,EAAE,WAAW,GAAG;EACpB,OAAO,aAAa,CAAC,EAAE,gBAAgB;EACvC,EAAE,yBAAyB;EAE3B,UAAU,EAAE;EACZ,UAAU,EAAE;EAEZ,cAAc,CAAC;EAGf,SAAS,sBAAsB;EAC/B,SAAS,iBAAiB,aAAa,iBAAiB,EAAE,SAAS,KAAK,CAAC;EACzE,SAAS,iBAAiB,WAAW,aAAa;CACpD;CAEA,MAAM,uBAAuB,WAAmB;EAC9C,OAAO,KAAK,IAAI,OAAQ,IAAI,KAAK,IAAI,OAAQ,IAAI,UAAU,MAAM,CAAC;CACpE;CAEA,MAAM,0BAA0B,WAAmB;EACjD,OAAO,UAAU;CACnB;CAEA,MAAM,uBAAuB,WAAmB;EAC9C,OAAO,KAAK,IAAI,OAAQ,IAAI,KAAK,IAAI,OAAQ,IAAI,UAAU,MAAM,CAAC;CACpE;CAEA,MAAM,0BAA0B,WAAmB;EACjD,OAAO,UAAU;CACnB;CAEA,MAAM,aAAa,SAAS,sBAAsB;CAClD,MAAM,aAAa,SAAS,sBAAsB;CAGlD,MAAM,gBAAgB,MAAkB;EACtC,WAAW,IAAI,EAAE,IAAI;EACrB,WAAW,IAAI,EAAE,IAAI;EACrB,WAAW,UAAU,WAAW,WAAW,CAAC;EAC5C,WAAW,UAAU,WAAW,WAAW,CAAC;EAC5C,WAAW,IAAI;CACjB;CAEA,MAAM,mBAAmB,MAAkB;EACzC,aAAa,CAAC;EACd,SAAS,UAAU;CACrB;CAEA,MAAM,iBAAiB,MAAkB;EACvC,aAAa,CAAC;EACd,UAAU,WAAW;EACrB,UAAU,WAAW;EAErB,YAAY,UAAU;EACtB,SAAS,gBAAgB;EAEzB,QAAQ;CACV;CAGA,MAAM,gBAAgB;EACpB,SAAS,oBAAoB,aAAa,eAAe;EACzD,SAAS,oBAAoB,WAAW,aAAa;CACvD;CAEA,MACE,SACC,KAAK,WAAW;EACf,QAAQ,oBAAoB,aAAa,eAAe;EACxD,IAAI,CAAC,KAAK;EACV,IAAI,iBAAiB,aAAa,eAAe;CACnD,GACA,EAAE,WAAW,KAAK,CACpB;CAEA,sBAAsB;EACpB,OAAO,OAAO,oBAAoB,aAAa,eAAe;EAC9D,QAAQ;CACV,CAAC;CAED,OAAO,EACL,OAAO,SAAiD;EACtD,IAAI,QAAQ,YAAY,KAAA,GACtB,UAAU,QAAQ;EAEpB,IAAI,QAAQ,YAAY,KAAA,GACtB,UAAU,QAAQ;CAEtB,EACF;AACF"}
package/dist/use-model/index.js.map CHANGED
@@ -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;CAEJ,IAAI,OAAO;EACT,MAAM,WAAW,MAAM,aAAa;EAIpC,MAAM,UAHI,UAAU,aAAa,KAGhB,QAAQ;EAGzB,YACQ,MAAM,YACX,MAAM;GACL,OAAO,QAAQ;EACjB,CACF;EAEA,MAAM,iBAAiB;GACrB,OAAO,OAAO,UAAU,aAAa,MAAM,IAAI;EACjD;EAiBA,OAAO;GAdL,WAAW;GACX,IAAI,QAAQ;IACV,OAAO,OAAO;GAChB;GACA,IAAI,MAAM,GAAG;IACX,IAAI,MAAM,OAAO,OACf,KAAK,UAAU,YAAsB,CAAC;IAExC,IAAI,SAAS,GACX,OAAO,QAAQ;GAEnB;EAGS;CACb;CAeA,OAAO;EAXL,WAAW;EAEX,IAAI,QAAqB;GACvB,OAAQ,MAAM,aAAa;EAC7B;EAEA,IAAI,MAAM,GAAgB;GACxB,KAAK,UAAU,YAAsB,CAAC;EACxC;CAGS;AACb"}
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;CAEJ,IAAI,OAAO;EACT,MAAM,WAAW,MAAM,aAAa;EAIpC,MAAM,UAHI,UAAU,aAAa,IAAA,CAGhB,QAAQ;EAGzB,YACQ,MAAM,YACX,MAAM;GACL,OAAO,QAAQ;EACjB,CACF;EAEA,MAAM,iBAAiB;GACrB,OAAO,OAAO,UAAU,aAAa,MAAM,IAAI;EACjD;EAiBA,OAAO;GAdL,WAAW;GACX,IAAI,QAAQ;IACV,OAAO,OAAO;GAChB;GACA,IAAI,MAAM,GAAG;IACX,IAAI,MAAM,OAAO,OACf,KAAK,UAAU,YAAsB,CAAC;IAExC,IAAI,SAAS,GACX,OAAO,QAAQ;GAEnB;EAGS;CACb;CAeA,OAAO;EAXL,WAAW;EAEX,IAAI,QAAqB;GACvB,OAAQ,MAAM,aAAa;EAC7B;EAEA,IAAI,MAAM,GAAgB;GACxB,KAAK,UAAU,YAAsB,CAAC;EACxC;CAGS;AACb"}
package/dist/use-pop/index.js.map CHANGED
@@ -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;CAClD,IAAI,CAAC,iBAAiB;EACpB,kBAAkB,SAAS,cAAc,KAAK;EAC9C,gBAAgB,KAAK;EACrB,SAAS,KAAK,YAAY,eAAe;CAC3C;CAEA,MAAM,EACJ,YACA,YACA,UACA,YAAY,IACZ,yBACA,eACA,gBACA,WACA,WACA,UACE;;CAGJ,MAAM,qBAAqB;EAAE,KAAK;EAAU,OAAO;EAAQ,QAAQ;EAAO,MAAM;CAAQ;CAExF,SAAS,iBAAoB,OAAoB;EAC/C,OAAO,MAAM,KAAK,IAAI,MAAM,QAAQ;CACtC;;;;;CAMA,eAAe,OAAO,gBAAgB,OAAO;EAC3C,MAAM,YAAY,WAAW;EAC7B,MAAM,YAAY,WAAW;EAE7B,IAAI,EAAE,qBAAqB,gBAAgB,EAAE,qBAAqB,cAChE;EAGF,iBAAiB,WAAW,SAAS;EAGrC,MAAM,aAAa;GAAC,OAAO,UAAU,QAAQ,YAAY,CAAC;GAAG,KAAK;GAAG,MAAM;EAAC;EAE5E,IAAI,UAAU,OACZ,WAAW,KAAK,MAAM,EAAE,SAAS,SAAS,MAAM,CAAC,CAAC;EAGpD,MAAM,aAAa,iBAAiB,SAAS,KAAK;EAClD,MAAM,aAAa,iBAAiB,SAAS,KAAK;EAElD,MAAM,WAAW,MAAM,gBAAgB,WAAW,WAAW;GAC3D;GAEA,WAAW,GAAG,aAAa,eAAe,WAAW,KAAK,IAAI;EAChE,CAAC;EAED,MAAM,EAAE,GAAG,GAAG,gBAAgB,cAAc;EAE5C,UAAU,WAAW;GAAE,MAAM,GAAG,EAAE;GAAK,KAAK,GAAG,EAAE;EAAI,CAAC;EACtD,iBAAiB,QAAQ,QAAQ;EACjC,gBAAgB,QAAQ;EAGxB,IAAI,eAAe,OAAO;GACxB,MAAM,EAAE,GAAG,QAAQ,GAAG,WAAW,eAAe;GAEhD,MAAM,iBACJ,mBAAmB,UAAU,MAAM,GAAG,EAAE;GAC1C,MAAM,OAAO,GAAG,UAAU;GAE1B,MAAM,cAAc,YAAY;GAEhC,UAAU,SAAU,OAAQ;IAC1B,OAAO;IACP,QAAQ;IACR,MAAM,UAAU,GAAG,SAAS,YAAY;IACxC,KAAK,UAAU,GAAG,SAAS,YAAY;KACtC,iBAAiB,IAAI,YAAY;GACpC,CAAC;EACH;CAEF;CAEA,IAAI,gBAA+B,CAAC;;CAGpC,SAAS,kBAAkB;EACzB,IAAI,CAAC,WAAW,OAAO;EACvB,IAAI,yBAAyB;GAC3B,gBAAgB,iBAAiB,WAAW,KAAK;GACjD,cAAc,SAAS,OAAO;IAC5B,GAAG,iBAAiB,UAAU,uBAAuB;GACvD,CAAC;EACH;CACF;;CAGA,SAAS,qBAAqB;EAC5B,IAAI,yBACF,cAAc,SAAS,OAAO;GAC5B,GAAG,oBAAoB,UAAU,uBAAuB;EAC1D,CAAC;EAGH,gBAAgB,CAAC;CACnB;CAEA,SAAS,kBAAkB;EACzB,2BAA2B,OAAO,iBAAiB,UAAU,uBAAuB;CACtF;CAEA,SAAS,qBAAqB;EAC5B,2BAA2B,OAAO,oBAAoB,UAAU,uBAAuB;CACzF;CAEA,MACE;EAAC;QAAkB,iBAAiB,SAAS;QAAS,iBAAiB,SAAS;CAAC,IAChF,CAAC,aAAa;EACb,IAAI,SAAS;GACX,OAAO,IAAI;GACX,gBAAgB;GAChB,gBAAgB;GAChB;EACF;EACA,mBAAmB;EACnB,mBAAmB;CACrB,CACF;CAEA,sBAAsB;EACpB,mBAAmB;EACnB,mBAAmB;CACrB,CAAC;CAED,OAAO;;EAEL;;EAEA;CACF;AACF"}
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;CAClD,IAAI,CAAC,iBAAiB;EACpB,kBAAkB,SAAS,cAAc,KAAK;EAC9C,gBAAgB,KAAK;EACrB,SAAS,KAAK,YAAY,eAAe;CAC3C;CAEA,MAAM,EACJ,YACA,YACA,UACA,YAAY,IACZ,yBACA,eACA,gBACA,WACA,WACA,UACE;;CAGJ,MAAM,qBAAqB;EAAE,KAAK;EAAU,OAAO;EAAQ,QAAQ;EAAO,MAAM;CAAQ;CAExF,SAAS,iBAAoB,OAAoB;EAC/C,OAAO,MAAM,KAAK,IAAI,MAAM,QAAQ;CACtC;;;;;CAMA,eAAe,OAAO,gBAAgB,OAAO;EAC3C,MAAM,YAAY,WAAW;EAC7B,MAAM,YAAY,WAAW;EAE7B,IAAI,EAAE,qBAAqB,gBAAgB,EAAE,qBAAqB,cAChE;EAGF,iBAAiB,WAAW,SAAS;EAGrC,MAAM,aAAa;GAAC,OAAO,UAAU,QAAQ,YAAY,CAAC;GAAG,KAAK;GAAG,MAAM;EAAC;EAE5E,IAAI,UAAU,OACZ,WAAW,KAAK,MAAM,EAAE,SAAS,SAAS,MAAM,CAAC,CAAC;EAGpD,MAAM,aAAa,iBAAiB,SAAS,KAAK;EAClD,MAAM,aAAa,iBAAiB,SAAS,KAAK;EAElD,MAAM,WAAW,MAAM,gBAAgB,WAAW,WAAW;GAC3D;GAEA,WAAW,GAAG,aAAa,eAAe,WAAW,KAAK,IAAI;EAChE,CAAC;EAED,MAAM,EAAE,GAAG,GAAG,gBAAgB,cAAc;EAE5C,UAAU,WAAW;GAAE,MAAM,GAAG,EAAE;GAAK,KAAK,GAAG,EAAE;EAAI,CAAC;EACtD,iBAAiB,QAAQ,QAAQ;EACjC,gBAAgB,QAAQ;EAGxB,IAAI,eAAe,OAAO;GACxB,MAAM,EAAE,GAAG,QAAQ,GAAG,WAAW,eAAe;GAEhD,MAAM,iBACJ,mBAAmB,UAAU,MAAM,GAAG,CAAC,CAAC;GAC1C,MAAM,OAAO,GAAG,UAAU;GAE1B,MAAM,cAAc,YAAY;GAEhC,UAAU,SAAU,OAAQ;IAC1B,OAAO;IACP,QAAQ;IACR,MAAM,UAAU,GAAG,SAAS,YAAY;IACxC,KAAK,UAAU,GAAG,SAAS,YAAY;KACtC,iBAAiB,IAAI,YAAY;GACpC,CAAC;EACH;CAEF;CAEA,IAAI,gBAA+B,CAAC;;CAGpC,SAAS,kBAAkB;EACzB,IAAI,CAAC,WAAW,OAAO;EACvB,IAAI,yBAAyB;GAC3B,gBAAgB,iBAAiB,WAAW,KAAK;GACjD,cAAc,SAAS,OAAO;IAC5B,GAAG,iBAAiB,UAAU,uBAAuB;GACvD,CAAC;EACH;CACF;;CAGA,SAAS,qBAAqB;EAC5B,IAAI,yBACF,cAAc,SAAS,OAAO;GAC5B,GAAG,oBAAoB,UAAU,uBAAuB;EAC1D,CAAC;EAGH,gBAAgB,CAAC;CACnB;CAEA,SAAS,kBAAkB;EACzB,2BAA2B,OAAO,iBAAiB,UAAU,uBAAuB;CACtF;CAEA,SAAS,qBAAqB;EAC5B,2BAA2B,OAAO,oBAAoB,UAAU,uBAAuB;CACzF;CAEA,MACE;EAAC;QAAkB,iBAAiB,SAAS;QAAS,iBAAiB,SAAS;CAAC,IAChF,CAAC,aAAa;EACb,IAAI,SAAS;GACX,OAAO,IAAI;GACX,gBAAgB;GAChB,gBAAgB;GAChB;EACF;EACA,mBAAmB;EACnB,mBAAmB;CACrB,CACF;CAEA,sBAAsB;EACpB,mBAAmB;EACnB,mBAAmB;CACrB,CAAC;CAED,OAAO;;EAEL;;EAEA;CACF;AACF"}
package/dist/use-reactive-size/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../src/use-reactive-size/index.ts"],"sourcesContent":["import { computed, reactive } from 'vue'\n\nimport { useResizeObserver, type RefElement } from '../use-resize-observer'\n\ninterface ElementSize {\n width: number\n height: number\n}\n\n/**\n * 响应式尺寸\n * @param targets 目标元素\n * @returns 目标元素的宽高\n */\nexport function useReactiveSize(target: RefElement): ElementSize\nexport function useReactiveSize(targets: RefElement[]): ElementSize[]\nexport function useReactiveSize(targets: RefElement | RefElement[]): ElementSize | ElementSize[] {\n const sizes = Array.isArray(targets)\n ? targets.map(() => {\n return reactive({ width: 0, height: 0 })\n })\n : reactive({ width: 0, height: 0 })\n\n const sizesMap = Array.isArray(targets)\n ? computed(() => {\n const entries = targets\n .map((target, index) => {\n return [target.value!, (sizes as ElementSize[])[index]!]\n })\n .filter(([target]) => target) as [HTMLElement, ElementSize][]\n\n return new WeakMap(entries)\n })\n : computed(() => {\n return new WeakMap(targets.value ? [[targets.value, sizes as ElementSize]] : [])\n })\n\n useResizeObserver({\n targets,\n onResize(entries) {\n entries.forEach((entry) => {\n const borderBoxSize = entry.borderBoxSize[0]!\n const size = sizesMap.value.get(entry.target as HTMLElement)\n if (size && borderBoxSize) {\n size.width = borderBoxSize.inlineSize\n size.height = borderBoxSize.blockSize\n }\n })\n }\n })\n\n return sizes\n}\n"],"mappings":";;;AAgBA,SAAgB,gBAAgB,SAAiE;CAC/F,MAAM,QAAQ,MAAM,QAAQ,OAAO,IAC/B,QAAQ,UAAU;EAChB,OAAO,SAAS;GAAE,OAAO;GAAG,QAAQ;EAAE,CAAC;CACzC,CAAC,IACD,SAAS;EAAE,OAAO;EAAG,QAAQ;CAAE,CAAC;CAEpC,MAAM,WAAW,MAAM,QAAQ,OAAO,IAClC,eAAe;EACb,MAAM,UAAU,QACb,KAAK,QAAQ,UAAU;GACtB,OAAO,CAAC,OAAO,OAAS,MAAwB,MAAO;EACzD,CAAC,EACA,QAAQ,CAAC,YAAY,MAAM;EAE9B,OAAO,IAAI,QAAQ,OAAO;CAC5B,CAAC,IACD,eAAe;EACb,OAAO,IAAI,QAAQ,QAAQ,QAAQ,CAAC,CAAC,QAAQ,OAAO,KAAoB,CAAC,IAAI,CAAC,CAAC;CACjF,CAAC;CAEL,kBAAkB;EAChB;EACA,SAAS,SAAS;GAChB,QAAQ,SAAS,UAAU;IACzB,MAAM,gBAAgB,MAAM,cAAc;IAC1C,MAAM,OAAO,SAAS,MAAM,IAAI,MAAM,MAAqB;IAC3D,IAAI,QAAQ,eAAe;KACzB,KAAK,QAAQ,cAAc;KAC3B,KAAK,SAAS,cAAc;IAC9B;GACF,CAAC;EACH;CACF,CAAC;CAED,OAAO;AACT"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../src/use-reactive-size/index.ts"],"sourcesContent":["import { computed, reactive } from 'vue'\n\nimport { useResizeObserver, type RefElement } from '../use-resize-observer'\n\ninterface ElementSize {\n width: number\n height: number\n}\n\n/**\n * 响应式尺寸\n * @param targets 目标元素\n * @returns 目标元素的宽高\n */\nexport function useReactiveSize(target: RefElement): ElementSize\nexport function useReactiveSize(targets: RefElement[]): ElementSize[]\nexport function useReactiveSize(targets: RefElement | RefElement[]): ElementSize | ElementSize[] {\n const sizes = Array.isArray(targets)\n ? targets.map(() => {\n return reactive({ width: 0, height: 0 })\n })\n : reactive({ width: 0, height: 0 })\n\n const sizesMap = Array.isArray(targets)\n ? computed(() => {\n const entries = targets\n .map((target, index) => {\n return [target.value!, (sizes as ElementSize[])[index]!]\n })\n .filter(([target]) => target) as [HTMLElement, ElementSize][]\n\n return new WeakMap(entries)\n })\n : computed(() => {\n return new WeakMap(targets.value ? [[targets.value, sizes as ElementSize]] : [])\n })\n\n useResizeObserver({\n targets,\n onResize(entries) {\n entries.forEach((entry) => {\n const borderBoxSize = entry.borderBoxSize[0]!\n const size = sizesMap.value.get(entry.target as HTMLElement)\n if (size && borderBoxSize) {\n size.width = borderBoxSize.inlineSize\n size.height = borderBoxSize.blockSize\n }\n })\n }\n })\n\n return sizes\n}\n"],"mappings":";;;AAgBA,SAAgB,gBAAgB,SAAiE;CAC/F,MAAM,QAAQ,MAAM,QAAQ,OAAO,IAC/B,QAAQ,UAAU;EAChB,OAAO,SAAS;GAAE,OAAO;GAAG,QAAQ;EAAE,CAAC;CACzC,CAAC,IACD,SAAS;EAAE,OAAO;EAAG,QAAQ;CAAE,CAAC;CAEpC,MAAM,WAAW,MAAM,QAAQ,OAAO,IAClC,eAAe;EACb,MAAM,UAAU,QACb,KAAK,QAAQ,UAAU;GACtB,OAAO,CAAC,OAAO,OAAS,MAAwB,MAAO;EACzD,CAAC,CAAC,CACD,QAAQ,CAAC,YAAY,MAAM;EAE9B,OAAO,IAAI,QAAQ,OAAO;CAC5B,CAAC,IACD,eAAe;EACb,OAAO,IAAI,QAAQ,QAAQ,QAAQ,CAAC,CAAC,QAAQ,OAAO,KAAoB,CAAC,IAAI,CAAC,CAAC;CACjF,CAAC;CAEL,kBAAkB;EAChB;EACA,SAAS,SAAS;GAChB,QAAQ,SAAS,UAAU;IACzB,MAAM,gBAAgB,MAAM,cAAc;IAC1C,MAAM,OAAO,SAAS,MAAM,IAAI,MAAM,MAAqB;IAC3D,IAAI,QAAQ,eAAe;KACzB,KAAK,QAAQ,cAAc;KAC3B,KAAK,SAAS,cAAc;IAC9B;GACF,CAAC;EACH;CACF,CAAC;CAED,OAAO;AACT"}
package/dist/use-resize-observer/index.js.map CHANGED
@@ -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;CAChF,IAAI,MAAM,QAAQ,OAAO,GACvB,OAAO,QAAQ,SAAS,WAAW,UAAU,QAAQ,QAAQ,CAAC;CAEhE,IAAI,CAAC,QAAQ,SAAS,CAAC,UAAU;CACjC,SAAS,UAAU,QAAQ,KAAK;CAChC,SAAS,WAAW;AACtB;;;;;AAMA,SAAgB,kBAAkB,SAAsD;CACtF,MAAM,EAAE,SAAS,aAAa;CAE9B,IAAI;CAEJ,IAAI,MAAM,QAAQ,OAAO,GACvB,MACE,UACC,KAAK,WAAW;EAEf,OAAO,SAAS,WAAW;GACzB,UAAU,UAAU,UAAU,MAAM;EACtC,CAAC;EAED,IAAI,CAAC,YAAY,CAAC,CAAC,IAAI,QACrB,WAAW,IAAI,eAAe,QAAQ;EAGxC,IAAI,SAAS,WAAW;GACtB,UAAU,UAAU,QAAQ,MAAM;EACpC,CAAC;CACH,GACA,EAAE,WAAW,KAAK,CACpB;MAEA,MACE,UACC,KAAK,WAAW;EACf,UAAU,UAAU,UAAU,MAAM;EACpC,IAAI,CAAC,YAAY,KACf,WAAW,IAAI,eAAe,QAAQ;EAExC,OAAO,UAAU,QAAQ,GAAG;CAC9B,GACA,EAAE,WAAW,KAAK,CACpB;CAGF,sBAAsB;EACpB,UAAU,SAAS,QAAQ;EAC3B,WAAW,KAAA;CACb,CAAC;CAED,OAAO,EACL,aAAa;EACX,UAAU,SAAS,QAAQ;EAC3B,WAAW,KAAA;CACb,EACF;AACF;;;;AAKA,SAAgB,sBAMd;CACA,MAAM,gCAAgB,IAAI,IAA2B;CAErD,MAAM,WAAW,IAAI,gBAAgB,YAAY;EAC/C,QAAQ,SAAS,UAAU;GACzB,MAAM,SAAS,MAAM;GACrB,IAAI,CAAC,OAAO,QAAQ,IAAI;IACtB,OAAO,QAAQ,KAAK;IACpB;GACF;GAGA,cAFyB,IAAI,MAE5B,IAAI,KAAK;EACZ,CAAC;CACH,CAAC;;;;;;CAOD,SAAS,UACP,IACA,IACA;EACA,SAAS,QAAQ,EAAE;EACnB,cAAc,IAAI,IAAI,EAAE;CAC1B;;;;;CAMA,SAAS,YAAY,IAAiB;EACpC,SAAS,UAAU,EAAE;EACrB,OAAO,GAAG,QAAQ;EAClB,cAAc,OAAO,EAAE;CACzB;CAEA,sBAAsB;EACpB,cAAc,SAAS,GAAG,OAAO;GAC/B,SAAS,UAAU,EAAE;EACvB,CAAC;EACD,cAAc,MAAM;EACpB,SAAS,WAAW;CACtB,CAAC;CAED,OAAO;EAAE;EAAW;CAAY;AAClC"}
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;CAChF,IAAI,MAAM,QAAQ,OAAO,GACvB,OAAO,QAAQ,SAAS,WAAW,UAAU,QAAQ,QAAQ,CAAC;CAEhE,IAAI,CAAC,QAAQ,SAAS,CAAC,UAAU;CACjC,SAAS,UAAU,QAAQ,KAAK;CAChC,SAAS,WAAW;AACtB;;;;;AAMA,SAAgB,kBAAkB,SAAsD;CACtF,MAAM,EAAE,SAAS,aAAa;CAE9B,IAAI;CAEJ,IAAI,MAAM,QAAQ,OAAO,GACvB,MACE,UACC,KAAK,WAAW;EAEf,OAAO,SAAS,WAAW;GACzB,UAAU,UAAU,UAAU,MAAM;EACtC,CAAC;EAED,IAAI,CAAC,YAAY,CAAC,CAAC,IAAI,QACrB,WAAW,IAAI,eAAe,QAAQ;EAGxC,IAAI,SAAS,WAAW;GACtB,UAAU,UAAU,QAAQ,MAAM;EACpC,CAAC;CACH,GACA,EAAE,WAAW,KAAK,CACpB;MAEA,MACE,UACC,KAAK,WAAW;EACf,UAAU,UAAU,UAAU,MAAM;EACpC,IAAI,CAAC,YAAY,KACf,WAAW,IAAI,eAAe,QAAQ;EAExC,OAAO,UAAU,QAAQ,GAAG;CAC9B,GACA,EAAE,WAAW,KAAK,CACpB;CAGF,sBAAsB;EACpB,UAAU,SAAS,QAAQ;EAC3B,WAAW,KAAA;CACb,CAAC;CAED,OAAO,EACL,aAAa;EACX,UAAU,SAAS,QAAQ;EAC3B,WAAW,KAAA;CACb,EACF;AACF;;;;AAKA,SAAgB,sBAMd;CACA,MAAM,gCAAgB,IAAI,IAA2B;CAErD,MAAM,WAAW,IAAI,gBAAgB,YAAY;EAC/C,QAAQ,SAAS,UAAU;GACzB,MAAM,SAAS,MAAM;GACrB,IAAI,CAAC,OAAO,QAAQ,IAAI;IACtB,OAAO,QAAQ,KAAK;IACpB;GACF;GAGA,cAFyB,IAAI,MAE5B,CAAC,GAAG,KAAK;EACZ,CAAC;CACH,CAAC;;;;;;CAOD,SAAS,UACP,IACA,IACA;EACA,SAAS,QAAQ,EAAE;EACnB,cAAc,IAAI,IAAI,EAAE;CAC1B;;;;;CAMA,SAAS,YAAY,IAAiB;EACpC,SAAS,UAAU,EAAE;EACrB,OAAO,GAAG,QAAQ;EAClB,cAAc,OAAO,EAAE;CACzB;CAEA,sBAAsB;EACpB,cAAc,SAAS,GAAG,OAAO;GAC/B,SAAS,UAAU,EAAE;EACvB,CAAC;EACD,cAAc,MAAM;EACpB,SAAS,WAAW;CACtB,CAAC;CAED,OAAO;EAAE;EAAW;CAAY;AAClC"}
package/dist/use-transition/use-style-transition.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-style-transition.js","names":[],"sources":["../../src/use-transition/use-style-transition.ts"],"sourcesContent":["import { createToggle, nextFrame, setStyles } from '@veltra/utils'\nimport { isRef, watch, type CSSProperties } from 'vue'\n\nimport type { Returned, StyleTransitionOptions } from './type'\nimport { watchTransition } from './utils'\n\nexport function useStyleTransition(options: StyleTransitionOptions): Returned {\n const {\n // enterFrom,\n // leaveTo,\n enterTo,\n enterActive,\n leaveActive,\n target,\n afterEnter,\n afterLeave,\n enterCanceled,\n leaveCanceled\n } = options\n\n const getDom = (): HTMLElement | undefined => (isRef(target) ? target.value : target)\n\n /** 进入动画前的初始状态 */\n const transitionOriginStyle: CSSProperties = {}\n\n /** 获取过渡样式的初始样式 */\n const getOriginStyles = (styles: CSSProperties) => {\n return Object.fromEntries(\n Object.keys(styles).map((key) => {\n return [key, transitionOriginStyle[key as keyof CSSProperties]]\n })\n )\n }\n // 监听dom并获取dom在进入动画之前的样式\n // ...Object.keys(enterFrom ?? {}),\n // ...Object.keys(leaveTo ?? {}),\n watch(\n () => getDom(),\n (dom) => {\n if (dom) {\n const map = dom.attributeStyleMap\n ~[...Object.keys(enterTo), ...Object.keys(enterActive)].forEach((key) => {\n transitionOriginStyle[key] = map.get(key)\n })\n } else {\n Object.keys(transitionOriginStyle).forEach((key) => {\n delete transitionOriginStyle[key as keyof CSSProperties]\n })\n }\n },\n { immediate: true }\n )\n\n /**\n * 添加过渡进入时并持续时的样式\n * @param dom 元素\n */\n const addEnterActive = (dom: HTMLElement) => {\n setStyles(dom, enterActive)\n }\n\n /**\n * 移除过渡进入时并持续时的样式\n * @param dom 元素\n */\n const removeEnterActive = (dom: HTMLElement) => {\n setStyles(dom, getOriginStyles(enterActive))\n }\n\n /**\n * 添加过渡离开并持续时的样式\n * @param dom 元素\n */\n const addLeaveActive = (dom: HTMLElement) => {\n setStyles(dom, leaveActive)\n }\n\n /**\n * 移除过渡离开并持续时的样式\n * @param dom 元素\n */\n const removeLeaveActive = (dom: HTMLElement) => {\n setStyles(dom, getOriginStyles(leaveActive))\n }\n\n /**\n * 添加过渡目标样式\n * @param dom 元素\n */\n // const addEnterFromStyle = (dom: HTMLElement) => {\n // enterFrom && setStyles(dom, enterFrom)\n // }\n\n /**\n * 移除过渡目标样式\n * @param dom 元素\n */\n // const removeEnterFromStyle = (dom: HTMLElement) => {\n // if (!enterFrom) return\n\n // const canRemovedStyles = {}\n\n // for (const key in enterFrom) {\n // if (key in enterTo) continue\n // canRemovedStyles[key] = enterFrom[key]\n // }\n\n // setStyles(dom, getOriginStyles(canRemovedStyles))\n // }\n /**\n * 添加过渡目标样式\n * @param dom 元素\n */\n const addEnterToStyle = (dom: HTMLElement) => {\n setStyles(dom, enterTo)\n }\n\n /**\n * 移除过渡目标样式\n * @param dom 元素\n */\n const removeEnterToStyle = (dom: HTMLElement) => {\n setStyles(dom, getOriginStyles(enterTo))\n }\n\n /** 开始进入动画 */\n const startEnter = () => {\n const dom = getDom()\n if (!dom) return\n addEnterActive(dom)\n // 在下一帧插入动画运动目标状态\n nextFrame(() => {\n addEnterToStyle(dom)\n })\n }\n\n /** 开始离开动画 */\n const startLeave = () => {\n const dom = getDom()\n if (!dom) return\n\n // 标记动画进入离开状态\n addLeaveActive(dom)\n\n // 在下一帧移除动画运动目标状态恢复原状或者应用新的状态\n nextFrame(() => {\n removeEnterToStyle(dom)\n })\n }\n\n const [active, toggle] = createToggle(false, (active) => {\n active ? startEnter() : startLeave()\n })\n\n watchTransition(getDom, {\n styleKeys: Object.keys(enterTo),\n onCancel(el) {\n // 激活状态，移除enter-active类\n if (active.value) {\n removeEnterActive(el)\n enterCanceled?.()\n } else {\n removeLeaveActive(el)\n leaveCanceled?.()\n }\n },\n\n onEnd(el) {\n if (active.value) {\n removeEnterActive(el)\n // removeEnterFromStyle(el)\n afterEnter?.()\n } else {\n removeLeaveActive(el)\n\n afterLeave?.()\n }\n }\n })\n\n return { toggle, enter: () => toggle(true), leave: () => toggle(false) }\n}\n"],"mappings":";;;;AAMA,SAAgB,mBAAmB,SAA2C;CAC5E,MAAM,EAGJ,SACA,aACA,aACA,QACA,YACA,YACA,eACA,kBACE;CAEJ,MAAM,eAAyC,MAAM,MAAM,IAAI,OAAO,QAAQ;;CAG9E,MAAM,wBAAuC,CAAC;;CAG9C,MAAM,mBAAmB,WAA0B;EACjD,OAAO,OAAO,YACZ,OAAO,KAAK,MAAM,EAAE,KAAK,QAAQ;GAC/B,OAAO,CAAC,KAAK,sBAAsB,IAA2B;EAChE,CAAC,CACH;CACF;CAIA,YACQ,OAAO,IACZ,QAAQ;EACP,IAAI,KAAK;GACP,MAAM,MAAM,IAAI;GAChB,CAAC,CAAC,GAAG,OAAO,KAAK,OAAO,GAAG,GAAG,OAAO,KAAK,WAAW,CAAC,EAAE,SAAS,QAAQ;IACvE,sBAAsB,OAAO,IAAI,IAAI,GAAG;GAC1C,CAAC;EACH,OACE,OAAO,KAAK,qBAAqB,EAAE,SAAS,QAAQ;GAClD,OAAO,sBAAsB;EAC/B,CAAC;CAEL,GACA,EAAE,WAAW,KAAK,CACpB;;;;;CAMA,MAAM,kBAAkB,QAAqB;EAC3C,UAAU,KAAK,WAAW;CAC5B;;;;;CAMA,MAAM,qBAAqB,QAAqB;EAC9C,UAAU,KAAK,gBAAgB,WAAW,CAAC;CAC7C;;;;;CAMA,MAAM,kBAAkB,QAAqB;EAC3C,UAAU,KAAK,WAAW;CAC5B;;;;;CAMA,MAAM,qBAAqB,QAAqB;EAC9C,UAAU,KAAK,gBAAgB,WAAW,CAAC;CAC7C;;;;;;;;;;;;;CA8BA,MAAM,mBAAmB,QAAqB;EAC5C,UAAU,KAAK,OAAO;CACxB;;;;;CAMA,MAAM,sBAAsB,QAAqB;EAC/C,UAAU,KAAK,gBAAgB,OAAO,CAAC;CACzC;;CAGA,MAAM,mBAAmB;EACvB,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK;EACV,eAAe,GAAG;EAElB,gBAAgB;GACd,gBAAgB,GAAG;EACrB,CAAC;CACH;;CAGA,MAAM,mBAAmB;EACvB,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK;EAGV,eAAe,GAAG;EAGlB,gBAAgB;GACd,mBAAmB,GAAG;EACxB,CAAC;CACH;CAEA,MAAM,CAAC,QAAQ,UAAU,aAAa,QAAQ,WAAW;EACvD,SAAS,WAAW,IAAI,WAAW;CACrC,CAAC;CAED,gBAAgB,QAAQ;EACtB,WAAW,OAAO,KAAK,OAAO;EAC9B,SAAS,IAAI;GAEX,IAAI,OAAO,OAAO;IAChB,kBAAkB,EAAE;IACpB,gBAAgB;GAClB,OAAO;IACL,kBAAkB,EAAE;IACpB,gBAAgB;GAClB;EACF;EAEA,MAAM,IAAI;GACR,IAAI,OAAO,OAAO;IAChB,kBAAkB,EAAE;IAEpB,aAAa;GACf,OAAO;IACL,kBAAkB,EAAE;IAEpB,aAAa;GACf;EACF;CACF,CAAC;CAED,OAAO;EAAE;EAAQ,aAAa,OAAO,IAAI;EAAG,aAAa,OAAO,KAAK;CAAE;AACzE"}
1
+ {"version":3,"file":"use-style-transition.js","names":[],"sources":["../../src/use-transition/use-style-transition.ts"],"sourcesContent":["import { createToggle, nextFrame, setStyles } from '@veltra/utils'\nimport { isRef, watch, type CSSProperties } from 'vue'\n\nimport type { Returned, StyleTransitionOptions } from './type'\nimport { watchTransition } from './utils'\n\nexport function useStyleTransition(options: StyleTransitionOptions): Returned {\n const {\n // enterFrom,\n // leaveTo,\n enterTo,\n enterActive,\n leaveActive,\n target,\n afterEnter,\n afterLeave,\n enterCanceled,\n leaveCanceled\n } = options\n\n const getDom = (): HTMLElement | undefined => (isRef(target) ? target.value : target)\n\n /** 进入动画前的初始状态 */\n const transitionOriginStyle: CSSProperties = {}\n\n /** 获取过渡样式的初始样式 */\n const getOriginStyles = (styles: CSSProperties) => {\n return Object.fromEntries(\n Object.keys(styles).map((key) => {\n return [key, transitionOriginStyle[key as keyof CSSProperties]]\n })\n )\n }\n // 监听dom并获取dom在进入动画之前的样式\n // ...Object.keys(enterFrom ?? {}),\n // ...Object.keys(leaveTo ?? {}),\n watch(\n () => getDom(),\n (dom) => {\n if (dom) {\n const map = dom.attributeStyleMap\n ~[...Object.keys(enterTo), ...Object.keys(enterActive)].forEach((key) => {\n transitionOriginStyle[key] = map.get(key)\n })\n } else {\n Object.keys(transitionOriginStyle).forEach((key) => {\n delete transitionOriginStyle[key as keyof CSSProperties]\n })\n }\n },\n { immediate: true }\n )\n\n /**\n * 添加过渡进入时并持续时的样式\n * @param dom 元素\n */\n const addEnterActive = (dom: HTMLElement) => {\n setStyles(dom, enterActive)\n }\n\n /**\n * 移除过渡进入时并持续时的样式\n * @param dom 元素\n */\n const removeEnterActive = (dom: HTMLElement) => {\n setStyles(dom, getOriginStyles(enterActive))\n }\n\n /**\n * 添加过渡离开并持续时的样式\n * @param dom 元素\n */\n const addLeaveActive = (dom: HTMLElement) => {\n setStyles(dom, leaveActive)\n }\n\n /**\n * 移除过渡离开并持续时的样式\n * @param dom 元素\n */\n const removeLeaveActive = (dom: HTMLElement) => {\n setStyles(dom, getOriginStyles(leaveActive))\n }\n\n /**\n * 添加过渡目标样式\n * @param dom 元素\n */\n // const addEnterFromStyle = (dom: HTMLElement) => {\n // enterFrom && setStyles(dom, enterFrom)\n // }\n\n /**\n * 移除过渡目标样式\n * @param dom 元素\n */\n // const removeEnterFromStyle = (dom: HTMLElement) => {\n // if (!enterFrom) return\n\n // const canRemovedStyles = {}\n\n // for (const key in enterFrom) {\n // if (key in enterTo) continue\n // canRemovedStyles[key] = enterFrom[key]\n // }\n\n // setStyles(dom, getOriginStyles(canRemovedStyles))\n // }\n /**\n * 添加过渡目标样式\n * @param dom 元素\n */\n const addEnterToStyle = (dom: HTMLElement) => {\n setStyles(dom, enterTo)\n }\n\n /**\n * 移除过渡目标样式\n * @param dom 元素\n */\n const removeEnterToStyle = (dom: HTMLElement) => {\n setStyles(dom, getOriginStyles(enterTo))\n }\n\n /** 开始进入动画 */\n const startEnter = () => {\n const dom = getDom()\n if (!dom) return\n addEnterActive(dom)\n // 在下一帧插入动画运动目标状态\n nextFrame(() => {\n addEnterToStyle(dom)\n })\n }\n\n /** 开始离开动画 */\n const startLeave = () => {\n const dom = getDom()\n if (!dom) return\n\n // 标记动画进入离开状态\n addLeaveActive(dom)\n\n // 在下一帧移除动画运动目标状态恢复原状或者应用新的状态\n nextFrame(() => {\n removeEnterToStyle(dom)\n })\n }\n\n const [active, toggle] = createToggle(false, (active) => {\n active ? startEnter() : startLeave()\n })\n\n watchTransition(getDom, {\n styleKeys: Object.keys(enterTo),\n onCancel(el) {\n // 激活状态，移除enter-active类\n if (active.value) {\n removeEnterActive(el)\n enterCanceled?.()\n } else {\n removeLeaveActive(el)\n leaveCanceled?.()\n }\n },\n\n onEnd(el) {\n if (active.value) {\n removeEnterActive(el)\n // removeEnterFromStyle(el)\n afterEnter?.()\n } else {\n removeLeaveActive(el)\n\n afterLeave?.()\n }\n }\n })\n\n return { toggle, enter: () => toggle(true), leave: () => toggle(false) }\n}\n"],"mappings":";;;;AAMA,SAAgB,mBAAmB,SAA2C;CAC5E,MAAM,EAGJ,SACA,aACA,aACA,QACA,YACA,YACA,eACA,kBACE;CAEJ,MAAM,eAAyC,MAAM,MAAM,IAAI,OAAO,QAAQ;;CAG9E,MAAM,wBAAuC,CAAC;;CAG9C,MAAM,mBAAmB,WAA0B;EACjD,OAAO,OAAO,YACZ,OAAO,KAAK,MAAM,CAAC,CAAC,KAAK,QAAQ;GAC/B,OAAO,CAAC,KAAK,sBAAsB,IAA2B;EAChE,CAAC,CACH;CACF;CAIA,YACQ,OAAO,IACZ,QAAQ;EACP,IAAI,KAAK;GACP,MAAM,MAAM,IAAI;GAChB,CAAC,CAAC,GAAG,OAAO,KAAK,OAAO,GAAG,GAAG,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,QAAQ;IACvE,sBAAsB,OAAO,IAAI,IAAI,GAAG;GAC1C,CAAC;EACH,OACE,OAAO,KAAK,qBAAqB,CAAC,CAAC,SAAS,QAAQ;GAClD,OAAO,sBAAsB;EAC/B,CAAC;CAEL,GACA,EAAE,WAAW,KAAK,CACpB;;;;;CAMA,MAAM,kBAAkB,QAAqB;EAC3C,UAAU,KAAK,WAAW;CAC5B;;;;;CAMA,MAAM,qBAAqB,QAAqB;EAC9C,UAAU,KAAK,gBAAgB,WAAW,CAAC;CAC7C;;;;;CAMA,MAAM,kBAAkB,QAAqB;EAC3C,UAAU,KAAK,WAAW;CAC5B;;;;;CAMA,MAAM,qBAAqB,QAAqB;EAC9C,UAAU,KAAK,gBAAgB,WAAW,CAAC;CAC7C;;;;;;;;;;;;;CA8BA,MAAM,mBAAmB,QAAqB;EAC5C,UAAU,KAAK,OAAO;CACxB;;;;;CAMA,MAAM,sBAAsB,QAAqB;EAC/C,UAAU,KAAK,gBAAgB,OAAO,CAAC;CACzC;;CAGA,MAAM,mBAAmB;EACvB,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK;EACV,eAAe,GAAG;EAElB,gBAAgB;GACd,gBAAgB,GAAG;EACrB,CAAC;CACH;;CAGA,MAAM,mBAAmB;EACvB,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK;EAGV,eAAe,GAAG;EAGlB,gBAAgB;GACd,mBAAmB,GAAG;EACxB,CAAC;CACH;CAEA,MAAM,CAAC,QAAQ,UAAU,aAAa,QAAQ,WAAW;EACvD,SAAS,WAAW,IAAI,WAAW;CACrC,CAAC;CAED,gBAAgB,QAAQ;EACtB,WAAW,OAAO,KAAK,OAAO;EAC9B,SAAS,IAAI;GAEX,IAAI,OAAO,OAAO;IAChB,kBAAkB,EAAE;IACpB,gBAAgB;GAClB,OAAO;IACL,kBAAkB,EAAE;IACpB,gBAAgB;GAClB;EACF;EAEA,MAAM,IAAI;GACR,IAAI,OAAO,OAAO;IAChB,kBAAkB,EAAE;IAEpB,aAAa;GACf,OAAO;IACL,kBAAkB,EAAE;IAEpB,aAAa;GACf;EACF;CACF,CAAC;CAED,OAAO;EAAE;EAAQ,aAAa,OAAO,IAAI;EAAG,aAAa,OAAO,KAAK;CAAE;AACzE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veltra/compositions",
3
- "version": "1.2.10",
3
+ "version": "1.2.12",
4
4
  "files": [
5
5
  "dist",
6
6
  "src"
@@ -19,12 +19,12 @@
19
19
  "@floating-ui/dom": "^1.7.6"
20
20
  },
21
21
  "devDependencies": {
22
- "@cat-kit/fe": "^1.1.6"
22
+ "@cat-kit/fe": "^1.1.8"
23
23
  },
24
24
  "peerDependencies": {
25
- "@cat-kit/core": ">=1.1.6",
26
- "@cat-kit/fe": ">=1.1.6",
27
- "@veltra/utils": "1.2.10",
28
- "vue": ">=3.5.0"
25
+ "@cat-kit/core": ">=1.1.8",
26
+ "@cat-kit/fe": ">=1.1.8",
27
+ "@veltra/utils": "1.2.12",
28
+ "vue": ">=3.5.39"
29
29
  }
30
30
  }