@veltra/utils 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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"expand-transition.js","names":[],"sources":["../../src/dom/expand-transition.ts"],"sourcesContent":["import { removeStyles, setStyles } from './style'\n\nexport interface ExpandTransitionOptions {\n transition?: string\n enterTransition?: string\n leaveTransition?: string\n opacity?: boolean\n}\n\nfunction readVerticalPadding(el: HTMLElement) {\n const { paddingTop, paddingBottom } = getComputedStyle(el)\n return { paddingTop, paddingBottom }\n}\n\nfunction getTransition(options: ExpandTransitionOptions, type: 'enter' | 'leave') {\n return (\n (type === 'enter' ? options.enterTransition : options.leaveTransition) ??\n options.transition ??\n 'height 0.25s cubic-bezier(0.4, 0, 0.2, 1)'\n )\n}\n\nexport class ExpandTransition {\n private cleanupMap = new Map<HTMLElement, () => void>()\n\n constructor(private options: ExpandTransitionOptions = {}) {}\n\n cancel(el: HTMLElement) {\n this.cleanupMap.get(el)?.()\n this.cleanupMap.delete(el)\n }\n\n enter(el: HTMLElement) {\n const height = el.scrollHeight\n const { paddingTop, paddingBottom } = readVerticalPadding(el)\n\n setStyles(el, {\n boxSizing: 'border-box',\n height: 0,\n paddingTop: 0,\n paddingBottom: 0,\n overflow: 'hidden',\n transition: getTransition(this.options, 'enter'),\n willChange: this.options.opacity ? 'height, opacity' : 'height'\n })\n\n if (this.options.opacity) {\n el.style.opacity = '0'\n }\n\n void el.offsetHeight\n\n setStyles(el, { height: `${height}px`, paddingTop, paddingBottom })\n\n if (this.options.opacity) {\n el.style.opacity = '1'\n }\n }\n\n afterEnter(el: HTMLElement) {\n this.resetTransitionStyles(el)\n }\n\n beforeLeave(el: HTMLElement) {\n const { paddingTop, paddingBottom } = readVerticalPadding(el)\n\n setStyles(el, {\n boxSizing: 'border-box',\n height: `${el.scrollHeight}px`,\n paddingTop,\n paddingBottom,\n overflow: 'hidden',\n transition: getTransition(this.options, 'leave'),\n willChange: this.options.opacity ? 'height, opacity' : 'height'\n })\n\n if (this.options.opacity) {\n el.style.opacity = '1'\n }\n }\n\n leave(el: HTMLElement) {\n void el.offsetHeight\n\n setStyles(el, { height: 0, paddingTop: 0, paddingBottom: 0 })\n\n if (this.options.opacity) {\n el.style.opacity = '0'\n }\n }\n\n afterLeave(el: HTMLElement) {\n this.resetTransitionStyles(el)\n }\n\n expand(el: HTMLElement) {\n this.animate(el, true)\n }\n\n collapse(el: HTMLElement) {\n this.animate(el, false)\n }\n\n setExpanded(el: HTMLElement, expanded: boolean) {\n this.cancel(el)\n this.resetTemporaryStyles(el)\n el.style.overflow = 'hidden'\n el.style.height = expanded ? 'auto' : '0px'\n }\n\n private animate(el: HTMLElement, expanded: boolean) {\n this.cancel(el)\n\n const startHeight = el.offsetHeight\n const endHeight = expanded ? el.scrollHeight : 0\n const { paddingTop, paddingBottom } = readVerticalPadding(el)\n\n if (startHeight === endHeight) {\n this.setExpanded(el, expanded)\n return\n }\n\n setStyles(el, {\n boxSizing: 'border-box',\n height: `${startHeight}px`,\n paddingTop,\n paddingBottom,\n overflow: 'hidden',\n transition: getTransition(this.options, expanded ? 'enter' : 'leave'),\n willChange: 'height'\n })\n\n void el.offsetHeight\n\n setStyles(el, {\n height: `${endHeight}px`,\n paddingTop: expanded ? paddingTop : 0,\n paddingBottom: expanded ? paddingBottom : 0\n })\n\n const cleanup = () => {\n el.removeEventListener('transitionend', onEnd)\n el.removeEventListener('transitioncancel', onEnd)\n this.cleanupMap.delete(el)\n }\n\n const onEnd = (e: TransitionEvent) => {\n if (e.target !== el || e.propertyName !== 'height') return\n cleanup()\n this.resetTemporaryStyles(el)\n el.style.overflow = 'hidden'\n el.style.height = expanded ? 'auto' : '0px'\n }\n\n el.addEventListener('transitionend', onEnd)\n el.addEventListener('transitioncancel', onEnd)\n this.cleanupMap.set(el, cleanup)\n }\n\n private resetTransitionStyles(el: HTMLElement) {\n removeStyles(el, [\n 'box-sizing',\n 'height',\n 'padding-top',\n 'padding-bottom',\n 'overflow',\n 'transition',\n 'opacity',\n 'will-change'\n ])\n }\n\n private resetTemporaryStyles(el: HTMLElement) {\n removeStyles(el, [\n 'box-sizing',\n 'padding-top',\n 'padding-bottom',\n 'transition',\n 'opacity',\n 'will-change'\n ])\n }\n}\n"],"mappings":";;AASA,SAAS,oBAAoB,IAAiB;CAC5C,MAAM,EAAE,YAAY,kBAAkB,iBAAiB,EAAE;CACzD,OAAO;EAAE;EAAY;CAAc;AACrC;AAEA,SAAS,cAAc,SAAkC,MAAyB;CAChF,QACG,SAAS,UAAU,QAAQ,kBAAkB,QAAQ,oBACtD,QAAQ,cACR;AAEJ;AAEA,IAAa,mBAAb,MAA8B;CAGR;CAFpB,6BAAqB,IAAI,IAA6B;CAEtD,YAAY,UAA2C,CAAC,GAAG;EAAvC,KAAA,UAAA;CAAwC;CAE5D,OAAO,IAAiB;EACtB,KAAK,WAAW,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"expand-transition.js","names":[],"sources":["../../src/dom/expand-transition.ts"],"sourcesContent":["import { removeStyles, setStyles } from './style'\n\nexport interface ExpandTransitionOptions {\n transition?: string\n enterTransition?: string\n leaveTransition?: string\n opacity?: boolean\n}\n\nfunction readVerticalPadding(el: HTMLElement) {\n const { paddingTop, paddingBottom } = getComputedStyle(el)\n return { paddingTop, paddingBottom }\n}\n\nfunction getTransition(options: ExpandTransitionOptions, type: 'enter' | 'leave') {\n return (\n (type === 'enter' ? options.enterTransition : options.leaveTransition) ??\n options.transition ??\n 'height 0.25s cubic-bezier(0.4, 0, 0.2, 1)'\n )\n}\n\nexport class ExpandTransition {\n private cleanupMap = new Map<HTMLElement, () => void>()\n\n constructor(private options: ExpandTransitionOptions = {}) {}\n\n cancel(el: HTMLElement) {\n this.cleanupMap.get(el)?.()\n this.cleanupMap.delete(el)\n }\n\n enter(el: HTMLElement) {\n const height = el.scrollHeight\n const { paddingTop, paddingBottom } = readVerticalPadding(el)\n\n setStyles(el, {\n boxSizing: 'border-box',\n height: 0,\n paddingTop: 0,\n paddingBottom: 0,\n overflow: 'hidden',\n transition: getTransition(this.options, 'enter'),\n willChange: this.options.opacity ? 'height, opacity' : 'height'\n })\n\n if (this.options.opacity) {\n el.style.opacity = '0'\n }\n\n void el.offsetHeight\n\n setStyles(el, { height: `${height}px`, paddingTop, paddingBottom })\n\n if (this.options.opacity) {\n el.style.opacity = '1'\n }\n }\n\n afterEnter(el: HTMLElement) {\n this.resetTransitionStyles(el)\n }\n\n beforeLeave(el: HTMLElement) {\n const { paddingTop, paddingBottom } = readVerticalPadding(el)\n\n setStyles(el, {\n boxSizing: 'border-box',\n height: `${el.scrollHeight}px`,\n paddingTop,\n paddingBottom,\n overflow: 'hidden',\n transition: getTransition(this.options, 'leave'),\n willChange: this.options.opacity ? 'height, opacity' : 'height'\n })\n\n if (this.options.opacity) {\n el.style.opacity = '1'\n }\n }\n\n leave(el: HTMLElement) {\n void el.offsetHeight\n\n setStyles(el, { height: 0, paddingTop: 0, paddingBottom: 0 })\n\n if (this.options.opacity) {\n el.style.opacity = '0'\n }\n }\n\n afterLeave(el: HTMLElement) {\n this.resetTransitionStyles(el)\n }\n\n expand(el: HTMLElement) {\n this.animate(el, true)\n }\n\n collapse(el: HTMLElement) {\n this.animate(el, false)\n }\n\n setExpanded(el: HTMLElement, expanded: boolean) {\n this.cancel(el)\n this.resetTemporaryStyles(el)\n el.style.overflow = 'hidden'\n el.style.height = expanded ? 'auto' : '0px'\n }\n\n private animate(el: HTMLElement, expanded: boolean) {\n this.cancel(el)\n\n const startHeight = el.offsetHeight\n const endHeight = expanded ? el.scrollHeight : 0\n const { paddingTop, paddingBottom } = readVerticalPadding(el)\n\n if (startHeight === endHeight) {\n this.setExpanded(el, expanded)\n return\n }\n\n setStyles(el, {\n boxSizing: 'border-box',\n height: `${startHeight}px`,\n paddingTop,\n paddingBottom,\n overflow: 'hidden',\n transition: getTransition(this.options, expanded ? 'enter' : 'leave'),\n willChange: 'height'\n })\n\n void el.offsetHeight\n\n setStyles(el, {\n height: `${endHeight}px`,\n paddingTop: expanded ? paddingTop : 0,\n paddingBottom: expanded ? paddingBottom : 0\n })\n\n const cleanup = () => {\n el.removeEventListener('transitionend', onEnd)\n el.removeEventListener('transitioncancel', onEnd)\n this.cleanupMap.delete(el)\n }\n\n const onEnd = (e: TransitionEvent) => {\n if (e.target !== el || e.propertyName !== 'height') return\n cleanup()\n this.resetTemporaryStyles(el)\n el.style.overflow = 'hidden'\n el.style.height = expanded ? 'auto' : '0px'\n }\n\n el.addEventListener('transitionend', onEnd)\n el.addEventListener('transitioncancel', onEnd)\n this.cleanupMap.set(el, cleanup)\n }\n\n private resetTransitionStyles(el: HTMLElement) {\n removeStyles(el, [\n 'box-sizing',\n 'height',\n 'padding-top',\n 'padding-bottom',\n 'overflow',\n 'transition',\n 'opacity',\n 'will-change'\n ])\n }\n\n private resetTemporaryStyles(el: HTMLElement) {\n removeStyles(el, [\n 'box-sizing',\n 'padding-top',\n 'padding-bottom',\n 'transition',\n 'opacity',\n 'will-change'\n ])\n }\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"highlight.js","names":[],"sources":["../../src/dom/highlight.ts"],"sourcesContent":["// TODO: 在多种场景下, 比较KMP算法, BM算法, two-way算法是否比正则更快\n\ninterface HighlightChunk {\n text: string\n highlight: boolean\n}\n\nconst escapeRegexp = (term: string): string =>\n term.replace(/[|\\\\{}()[\\]^$+*?.-]/g, (char: string) => `\\\\${char}`)\n\n/**\n * 获取文本高亮片段\n * @param string 字符串\n * @param substrings 需要匹配的字串列表\n */\nexport function getHighlightChunks(str: string, substrings: string[]): HighlightChunk[] {\n const _substrings = substrings.filter((s) => !!s).map((s) => escapeRegexp(s.trim()))\n const re = new RegExp(`(${_substrings.join('|')})`, 'gi')\n return str\n .split(re)\n .filter(Boolean)\n .map((text) => ({ text, highlight: re.test(text) }))\n}\n"],"mappings":";AAOA,MAAM,gBAAgB,SACpB,KAAK,QAAQ,yBAAyB,SAAiB,KAAK,MAAM;;;;;;AAOpE,SAAgB,mBAAmB,KAAa,YAAwC;CACtF,MAAM,cAAc,WAAW,QAAQ,MAAM,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"highlight.js","names":[],"sources":["../../src/dom/highlight.ts"],"sourcesContent":["// TODO: 在多种场景下, 比较KMP算法, BM算法, two-way算法是否比正则更快\n\ninterface HighlightChunk {\n text: string\n highlight: boolean\n}\n\nconst escapeRegexp = (term: string): string =>\n term.replace(/[|\\\\{}()[\\]^$+*?.-]/g, (char: string) => `\\\\${char}`)\n\n/**\n * 获取文本高亮片段\n * @param string 字符串\n * @param substrings 需要匹配的字串列表\n */\nexport function getHighlightChunks(str: string, substrings: string[]): HighlightChunk[] {\n const _substrings = substrings.filter((s) => !!s).map((s) => escapeRegexp(s.trim()))\n const re = new RegExp(`(${_substrings.join('|')})`, 'gi')\n return str\n .split(re)\n .filter(Boolean)\n .map((text) => ({ text, highlight: re.test(text) }))\n}\n"],"mappings":";AAOA,MAAM,gBAAgB,SACpB,KAAK,QAAQ,yBAAyB,SAAiB,KAAK,MAAM;;;;;;AAOpE,SAAgB,mBAAmB,KAAa,YAAwC;CACtF,MAAM,cAAc,WAAW,QAAQ,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,MAAM,aAAa,EAAE,KAAK,CAAC,CAAC;CACnF,MAAM,KAAK,IAAI,OAAO,IAAI,YAAY,KAAK,GAAG,EAAE,IAAI,IAAI;CACxD,OAAO,IACJ,MAAM,EAAE,CAAC,CACT,OAAO,OAAO,CAAC,CACf,KAAK,UAAU;EAAE;EAAM,WAAW,GAAG,KAAK,IAAI;CAAE,EAAE;AACvD"}
|
package/dist/dom/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","names":[],"sources":["../../src/dom/style.ts"],"sourcesContent":["import { str } from '@cat-kit/core'\nimport type { CSSProperties } from 'vue'\n\n/**\n * 给数值加上单位\n * @param value 数值\n * @param unit 单位\n * @returns\n */\nexport function withUnit(value: number | string | undefined, unit: string): string | undefined {\n return value === undefined\n ? undefined\n : typeof value === 'number' || !isNaN(+value)\n ? String(value) + unit\n : value\n}\n\n/**\n * 设置元素样式，优先使用高性能的方式\n * @param el 元素\n * @param styles 样式\n */\nexport function setStyles(el: HTMLElement, styles: CSSProperties): void {\n Object.keys(styles).forEach((key) => {\n el.style[key] = styles[key]\n })\n // TODO: 此处有问题，在某些情况下会导致样式设置失效\n // 例如在 Tabs 组件中无法设置overflow属性\n // if (el.attributeStyleMap) {\n // Object.keys(styles).forEach(key => {\n // const value = styles[key]\n // if (!value && value !== 0) {\n // el.attributeStyleMap.delete(kebabCase(key))\n // } else {\n // el.attributeStyleMap.set(kebabCase(key), value)\n // }\n // })\n // } else {\n // Object.keys(styles).forEach(key => {\n // el.style[key] = styles[key]\n // })\n // }\n}\n\n/**\n * 移除样式\n * @param el dom元素\n * @param props 要移除的样式属性\n */\nexport function removeStyles(el: HTMLElement, props: string[]): void {\n if (el.attributeStyleMap) {\n props.forEach((key) => {\n el.attributeStyleMap.delete(str(key).kebabCase())\n })\n } else {\n props.forEach((key) => {\n el.style.removeProperty(key)\n })\n }\n}\n"],"mappings":";;;;;;;;AASA,SAAgB,SAAS,OAAoC,MAAkC;CAC7F,OAAO,UAAU,KAAA,IACb,KAAA,IACA,OAAO,UAAU,YAAY,CAAC,MAAM,CAAC,KAAK,IACxC,OAAO,KAAK,IAAI,OAChB;AACR;;;;;;AAOA,SAAgB,UAAU,IAAiB,QAA6B;CACtE,OAAO,KAAK,MAAM,
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../src/dom/style.ts"],"sourcesContent":["import { str } from '@cat-kit/core'\nimport type { CSSProperties } from 'vue'\n\n/**\n * 给数值加上单位\n * @param value 数值\n * @param unit 单位\n * @returns\n */\nexport function withUnit(value: number | string | undefined, unit: string): string | undefined {\n return value === undefined\n ? undefined\n : typeof value === 'number' || !isNaN(+value)\n ? String(value) + unit\n : value\n}\n\n/**\n * 设置元素样式，优先使用高性能的方式\n * @param el 元素\n * @param styles 样式\n */\nexport function setStyles(el: HTMLElement, styles: CSSProperties): void {\n Object.keys(styles).forEach((key) => {\n el.style[key] = styles[key]\n })\n // TODO: 此处有问题，在某些情况下会导致样式设置失效\n // 例如在 Tabs 组件中无法设置overflow属性\n // if (el.attributeStyleMap) {\n // Object.keys(styles).forEach(key => {\n // const value = styles[key]\n // if (!value && value !== 0) {\n // el.attributeStyleMap.delete(kebabCase(key))\n // } else {\n // el.attributeStyleMap.set(kebabCase(key), value)\n // }\n // })\n // } else {\n // Object.keys(styles).forEach(key => {\n // el.style[key] = styles[key]\n // })\n // }\n}\n\n/**\n * 移除样式\n * @param el dom元素\n * @param props 要移除的样式属性\n */\nexport function removeStyles(el: HTMLElement, props: string[]): void {\n if (el.attributeStyleMap) {\n props.forEach((key) => {\n el.attributeStyleMap.delete(str(key).kebabCase())\n })\n } else {\n props.forEach((key) => {\n el.style.removeProperty(key)\n })\n }\n}\n"],"mappings":";;;;;;;;AASA,SAAgB,SAAS,OAAoC,MAAkC;CAC7F,OAAO,UAAU,KAAA,IACb,KAAA,IACA,OAAO,UAAU,YAAY,CAAC,MAAM,CAAC,KAAK,IACxC,OAAO,KAAK,IAAI,OAChB;AACR;;;;;;AAOA,SAAgB,UAAU,IAAiB,QAA6B;CACtE,OAAO,KAAK,MAAM,CAAC,CAAC,SAAS,QAAQ;EACnC,GAAG,MAAM,OAAO,OAAO;CACzB,CAAC;AAiBH;;;;;;AAOA,SAAgB,aAAa,IAAiB,OAAuB;CACnE,IAAI,GAAG,mBACL,MAAM,SAAS,QAAQ;EACrB,GAAG,kBAAkB,OAAO,IAAI,GAAG,CAAC,CAAC,UAAU,CAAC;CAClD,CAAC;MAED,MAAM,SAAS,QAAQ;EACrB,GAAG,MAAM,eAAe,GAAG;CAC7B,CAAC;AAEL"}
|
package/dist/helper/tween.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tween.js","names":["pk"],"sources":["../../src/helper/tween.ts"],"sourcesContent":["/** 自 cat-kit 3.x Tween 行为对齐的轻量动画（原 `cat-kit/fe` 导出） */\n\nexport interface AnimeConfig<State extends Record<string, number>> {\n duration?: number\n easingFunction?: (progress: number) => number\n onComplete?(state: State): void\n}\n\nexport interface TweenConfig<State extends Record<string, number>> {\n duration?: number\n onUpdate?(state: State): void\n onComplete?(state: State): void\n easingFunction?: (progress: number) => number\n}\n\nexport class Tween<State extends Record<string, number> = Record<string, number>> {\n readonly state: State\n protected duration = 300\n protected onUpdate?: (state: State) => void\n protected onComplete?: (state: State) => void\n protected frameId?: number\n protected easingFunction: (progress: number) => number\n private defaultState: State\n\n constructor(state: State, config?: TweenConfig<State>) {\n this.state = state\n this.defaultState = { ...state }\n const { duration, onUpdate, onComplete, easingFunction } = config || {}\n if (duration !== undefined) this.duration = duration\n if (onUpdate !== undefined) this.onUpdate = onUpdate\n if (onComplete !== undefined) this.onComplete = onComplete\n this.easingFunction = easingFunction ?? Tween.easing.linear\n }\n\n protected raf(options: {\n onComplete: () => void\n duration: number\n tick: (p: number) => void\n }): void {\n const start = performance.now()\n const { onComplete, tick, duration } = options\n const update = (timestamp: number) => {\n const elapsed = timestamp - start\n const progress = Math.min(elapsed / duration, 1)\n tick(progress)\n if (progress < 1) {\n this.frameId = requestAnimationFrame(update)\n } else {\n tick(progress)\n this.stop()\n onComplete()\n }\n }\n this.frameId = requestAnimationFrame(update)\n }\n\n to(state: Partial<State>, config?: AnimeConfig<State>): void {\n this.stop()\n const prevState = { ...this.state }\n const stateDistance = Object.keys(state).reduce(\n (acc, key) => {\n const k = key as keyof State\n const sv = state[k] as number\n const pv = prevState[k] as number\n if ((sv || sv === 0) && (pv || pv === 0)) {\n acc[key] = sv - pv\n }\n return acc\n },\n {} as Record<string, number>\n )\n const duration = config?.duration || this.duration\n const easingFunction = config?.easingFunction || this.easingFunction\n const onComplete = config?.onComplete || this.onComplete\n this.raf({\n duration,\n onComplete: () => {\n for (const key in state) {\n if (key in this.state) {\n ;(this.state as Record<string, number>)[key] = state[key as keyof State] as number\n }\n }\n this.onUpdate?.(this.state)\n onComplete?.(this.state)\n },\n tick: (progress) => {\n for (const key in stateDistance) {\n const pk = key as keyof State\n const target = (prevState[pk] as number) + easingFunction(progress) * stateDistance[key]!\n ;(this.state as Record<string, number>)[key] = target\n }\n this.onUpdate?.(this.state)\n }\n })\n }\n\n back(config?: AnimeConfig<State>): void {\n this.to(this.defaultState as Partial<State>, config)\n }\n\n private stop(): boolean {\n if (!this.frameId) return false\n cancelAnimationFrame(this.frameId)\n this.frameId = undefined\n return true\n }\n\n static readonly easing = {\n linear: (p: number) => p,\n easeInQuad: (p: number) => p * p,\n easeOutQuad: (p: number) => p * (2 - p),\n easeInOutQuad: (p: number) => (p < 0.5 ? 2 * p * p : -1 + (4 - 2 * p) * p),\n easeInBack: (p: number) => p * p * ((2.70158 + 1) * p - 1),\n easeOutBack: (p: number) => 1 + 2.70158 * Math.pow(p - 1, 3) + 1.70158 * Math.pow(p - 1, 2),\n easeInOutBack: (p: number) => {\n const c1 = 1.70158\n const c2 = c1 * 1.525\n return p < 0.5\n ? (Math.pow(2 * p, 2) * ((c2 + 1) * 2 * p - c2)) / 2\n : (Math.pow(2 * p - 2, 2) * ((c2 + 1) * (p * 2 - 2) + c2) + 2) / 2\n }\n }\n}\n"],"mappings":";AAeA,IAAa,QAAb,MAAa,MAAqE;CAChF;CACA,WAAqB;CACrB;CACA;CACA;CACA;CACA;CAEA,YAAY,OAAc,QAA6B;EACrD,KAAK,QAAQ;EACb,KAAK,eAAe,EAAE,GAAG,MAAM;EAC/B,MAAM,EAAE,UAAU,UAAU,YAAY,mBAAmB,UAAU,CAAC;EACtE,IAAI,aAAa,KAAA,GAAW,KAAK,WAAW;EAC5C,IAAI,aAAa,KAAA,GAAW,KAAK,WAAW;EAC5C,IAAI,eAAe,KAAA,GAAW,KAAK,aAAa;EAChD,KAAK,iBAAiB,kBAAkB,MAAM,OAAO;CACvD;CAEA,IAAc,SAIL;EACP,MAAM,QAAQ,YAAY,IAAI;EAC9B,MAAM,EAAE,YAAY,MAAM,aAAa;EACvC,MAAM,UAAU,cAAsB;GACpC,MAAM,UAAU,YAAY;GAC5B,MAAM,WAAW,KAAK,IAAI,UAAU,UAAU,CAAC;GAC/C,KAAK,QAAQ;GACb,IAAI,WAAW,GACb,KAAK,UAAU,sBAAsB,MAAM;QACtC;IACL,KAAK,QAAQ;IACb,KAAK,KAAK;IACV,WAAW;GACb;EACF;EACA,KAAK,UAAU,sBAAsB,MAAM;CAC7C;CAEA,GAAG,OAAuB,QAAmC;EAC3D,KAAK,KAAK;EACV,MAAM,YAAY,EAAE,GAAG,KAAK,MAAM;EAClC,MAAM,gBAAgB,OAAO,KAAK,KAAK,
|
|
1
|
+
{"version":3,"file":"tween.js","names":["pk"],"sources":["../../src/helper/tween.ts"],"sourcesContent":["/** 自 cat-kit 3.x Tween 行为对齐的轻量动画（原 `cat-kit/fe` 导出） */\n\nexport interface AnimeConfig<State extends Record<string, number>> {\n duration?: number\n easingFunction?: (progress: number) => number\n onComplete?(state: State): void\n}\n\nexport interface TweenConfig<State extends Record<string, number>> {\n duration?: number\n onUpdate?(state: State): void\n onComplete?(state: State): void\n easingFunction?: (progress: number) => number\n}\n\nexport class Tween<State extends Record<string, number> = Record<string, number>> {\n readonly state: State\n protected duration = 300\n protected onUpdate?: (state: State) => void\n protected onComplete?: (state: State) => void\n protected frameId?: number\n protected easingFunction: (progress: number) => number\n private defaultState: State\n\n constructor(state: State, config?: TweenConfig<State>) {\n this.state = state\n this.defaultState = { ...state }\n const { duration, onUpdate, onComplete, easingFunction } = config || {}\n if (duration !== undefined) this.duration = duration\n if (onUpdate !== undefined) this.onUpdate = onUpdate\n if (onComplete !== undefined) this.onComplete = onComplete\n this.easingFunction = easingFunction ?? Tween.easing.linear\n }\n\n protected raf(options: {\n onComplete: () => void\n duration: number\n tick: (p: number) => void\n }): void {\n const start = performance.now()\n const { onComplete, tick, duration } = options\n const update = (timestamp: number) => {\n const elapsed = timestamp - start\n const progress = Math.min(elapsed / duration, 1)\n tick(progress)\n if (progress < 1) {\n this.frameId = requestAnimationFrame(update)\n } else {\n tick(progress)\n this.stop()\n onComplete()\n }\n }\n this.frameId = requestAnimationFrame(update)\n }\n\n to(state: Partial<State>, config?: AnimeConfig<State>): void {\n this.stop()\n const prevState = { ...this.state }\n const stateDistance = Object.keys(state).reduce(\n (acc, key) => {\n const k = key as keyof State\n const sv = state[k] as number\n const pv = prevState[k] as number\n if ((sv || sv === 0) && (pv || pv === 0)) {\n acc[key] = sv - pv\n }\n return acc\n },\n {} as Record<string, number>\n )\n const duration = config?.duration || this.duration\n const easingFunction = config?.easingFunction || this.easingFunction\n const onComplete = config?.onComplete || this.onComplete\n this.raf({\n duration,\n onComplete: () => {\n for (const key in state) {\n if (key in this.state) {\n ;(this.state as Record<string, number>)[key] = state[key as keyof State] as number\n }\n }\n this.onUpdate?.(this.state)\n onComplete?.(this.state)\n },\n tick: (progress) => {\n for (const key in stateDistance) {\n const pk = key as keyof State\n const target = (prevState[pk] as number) + easingFunction(progress) * stateDistance[key]!\n ;(this.state as Record<string, number>)[key] = target\n }\n this.onUpdate?.(this.state)\n }\n })\n }\n\n back(config?: AnimeConfig<State>): void {\n this.to(this.defaultState as Partial<State>, config)\n }\n\n private stop(): boolean {\n if (!this.frameId) return false\n cancelAnimationFrame(this.frameId)\n this.frameId = undefined\n return true\n }\n\n static readonly easing = {\n linear: (p: number) => p,\n easeInQuad: (p: number) => p * p,\n easeOutQuad: (p: number) => p * (2 - p),\n easeInOutQuad: (p: number) => (p < 0.5 ? 2 * p * p : -1 + (4 - 2 * p) * p),\n easeInBack: (p: number) => p * p * ((2.70158 + 1) * p - 1),\n easeOutBack: (p: number) => 1 + 2.70158 * Math.pow(p - 1, 3) + 1.70158 * Math.pow(p - 1, 2),\n easeInOutBack: (p: number) => {\n const c1 = 1.70158\n const c2 = c1 * 1.525\n return p < 0.5\n ? (Math.pow(2 * p, 2) * ((c2 + 1) * 2 * p - c2)) / 2\n : (Math.pow(2 * p - 2, 2) * ((c2 + 1) * (p * 2 - 2) + c2) + 2) / 2\n }\n }\n}\n"],"mappings":";AAeA,IAAa,QAAb,MAAa,MAAqE;CAChF;CACA,WAAqB;CACrB;CACA;CACA;CACA;CACA;CAEA,YAAY,OAAc,QAA6B;EACrD,KAAK,QAAQ;EACb,KAAK,eAAe,EAAE,GAAG,MAAM;EAC/B,MAAM,EAAE,UAAU,UAAU,YAAY,mBAAmB,UAAU,CAAC;EACtE,IAAI,aAAa,KAAA,GAAW,KAAK,WAAW;EAC5C,IAAI,aAAa,KAAA,GAAW,KAAK,WAAW;EAC5C,IAAI,eAAe,KAAA,GAAW,KAAK,aAAa;EAChD,KAAK,iBAAiB,kBAAkB,MAAM,OAAO;CACvD;CAEA,IAAc,SAIL;EACP,MAAM,QAAQ,YAAY,IAAI;EAC9B,MAAM,EAAE,YAAY,MAAM,aAAa;EACvC,MAAM,UAAU,cAAsB;GACpC,MAAM,UAAU,YAAY;GAC5B,MAAM,WAAW,KAAK,IAAI,UAAU,UAAU,CAAC;GAC/C,KAAK,QAAQ;GACb,IAAI,WAAW,GACb,KAAK,UAAU,sBAAsB,MAAM;QACtC;IACL,KAAK,QAAQ;IACb,KAAK,KAAK;IACV,WAAW;GACb;EACF;EACA,KAAK,UAAU,sBAAsB,MAAM;CAC7C;CAEA,GAAG,OAAuB,QAAmC;EAC3D,KAAK,KAAK;EACV,MAAM,YAAY,EAAE,GAAG,KAAK,MAAM;EAClC,MAAM,gBAAgB,OAAO,KAAK,KAAK,CAAC,CAAC,QACtC,KAAK,QAAQ;GACZ,MAAM,IAAI;GACV,MAAM,KAAK,MAAM;GACjB,MAAM,KAAK,UAAU;GACrB,KAAK,MAAM,OAAO,OAAO,MAAM,OAAO,IACpC,IAAI,OAAO,KAAK;GAElB,OAAO;EACT,GACA,CAAC,CACH;EACA,MAAM,WAAW,QAAQ,YAAY,KAAK;EAC1C,MAAM,iBAAiB,QAAQ,kBAAkB,KAAK;EACtD,MAAM,aAAa,QAAQ,cAAc,KAAK;EAC9C,KAAK,IAAI;GACP;GACA,kBAAkB;IAChB,KAAK,MAAM,OAAO,OAChB,IAAI,OAAO,KAAK,OACb,KAAM,MAAiC,OAAO,MAAM;IAGzD,KAAK,WAAW,KAAK,KAAK;IAC1B,aAAa,KAAK,KAAK;GACzB;GACA,OAAO,aAAa;IAClB,KAAK,MAAM,OAAO,eAAe;KAE/B,MAAM,SAAU,UAAUA,OAAiB,eAAe,QAAQ,IAAI,cAAc;KACnF,KAAM,MAAiC,OAAO;IACjD;IACA,KAAK,WAAW,KAAK,KAAK;GAC5B;EACF,CAAC;CACH;CAEA,KAAK,QAAmC;EACtC,KAAK,GAAG,KAAK,cAAgC,MAAM;CACrD;CAEA,OAAwB;EACtB,IAAI,CAAC,KAAK,SAAS,OAAO;EAC1B,qBAAqB,KAAK,OAAO;EACjC,KAAK,UAAU,KAAA;EACf,OAAO;CACT;CAEA,OAAgB,SAAS;EACvB,SAAS,MAAc;EACvB,aAAa,MAAc,IAAI;EAC/B,cAAc,MAAc,KAAK,IAAI;EACrC,gBAAgB,MAAe,IAAI,KAAM,IAAI,IAAI,IAAI,MAAM,IAAI,IAAI,KAAK;EACxE,aAAa,MAAc,IAAI,KAAM,UAAe,IAAI;EACxD,cAAc,MAAc,IAAI,UAAU,KAAK,IAAI,IAAI,GAAG,CAAC,IAAI,UAAU,KAAK,IAAI,IAAI,GAAG,CAAC;EAC1F,gBAAgB,MAAc;GAE5B,MAAM,KAAK,UAAK;GAChB,OAAO,IAAI,KACN,KAAK,IAAI,IAAI,GAAG,CAAC,KAAM,YAAU,IAAI,IAAI,MAAO,KAChD,KAAK,IAAI,IAAI,IAAI,GAAG,CAAC,KAAM,aAAW,IAAI,IAAI,KAAK,MAAM,KAAK;EACrE;CACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"proxy.js","names":[],"sources":["../../src/reactive/proxy.ts"],"sourcesContent":["/**\n * 创建一个介于vue的reactive和shallowReactive对象的中间层\n * @description\n * 如果对象含有嵌套对象，则**递归**进行中间代理\n *\n * @param o 代理对象\n * @param handler 处理函数\n * @param options 代理配置\n * @returns 中间代理对象\n */\nfunction createMiddleProxy(\n o: Record<string, any>,\n handler?: {\n set?: (field: string, val: any) => void\n get?: (field: string) => any\n changed?: (fields: string[]) => void\n },\n options?: {\n weakMap?: WeakMap<Record<string, any>, any>\n parentsField?: string\n changedFields?: string[]\n }\n) {\n let { weakMap, parentsField, changedFields = [] } = options || {}\n if (!weakMap) {\n weakMap = new WeakMap()\n }\n\n return new Proxy(o, {\n set(target, field: string, val) {\n const changedField = parentsField ? `${parentsField}.${field}` : field\n handler?.set?.(changedField, val)\n target[field] = val\n\n changedFields.push(changedField)\n Promise.resolve().then(() => {\n if (!changedFields.length) return\n handler?.changed?.([...changedFields])\n changedFields.splice(0)\n })\n\n return true\n },\n\n get(target, field: string) {\n handler?.get?.(field)\n\n const val = target[field]\n if (\n val !== null &&\n typeof val === 'object' &&\n !(val instanceof Date) &&\n !(val instanceof RegExp)\n ) {\n if (weakMap.has(val)) return weakMap.get(val)\n const valProxy = createMiddleProxy(val, handler, {\n weakMap,\n parentsField: parentsField ? `${parentsField}.${field}` : field,\n changedFields\n })\n weakMap.set(val, valProxy)\n\n return valProxy\n }\n\n return val\n }\n })\n}\n\n/**\n * 中间代理, 用于vue的reactive和shallowReactive方法的中间层\n * @param o 代理对象\n * @param config 代理配置\n * @returns\n */\nexport function middleProxy<O extends Record<string, any>>(\n o: O,\n handler?: {\n set?: (field: string, val: any) => void\n get?: (field: string) => any\n /**\n * 数值变更回调，传入的参数是本次模型值变更的所有字段\n * @param fields 变更的字段\n */\n changed?: (fields: string[]) => void\n }\n): O {\n return createMiddleProxy(o, handler) as O\n}\n"],"mappings":";;;;;;;;;;;AAUA,SAAS,kBACP,GACA,SAKA,SAKA;CACA,IAAI,EAAE,SAAS,cAAc,gBAAgB,CAAC,MAAM,WAAW,CAAC;CAChE,IAAI,CAAC,SACH,0BAAU,IAAI,QAAQ;CAGxB,OAAO,IAAI,MAAM,GAAG;EAClB,IAAI,QAAQ,OAAe,KAAK;GAC9B,MAAM,eAAe,eAAe,GAAG,aAAa,GAAG,UAAU;GACjE,SAAS,MAAM,cAAc,GAAG;GAChC,OAAO,SAAS;GAEhB,cAAc,KAAK,YAAY;GAC/B,QAAQ,QAAQ,
|
|
1
|
+
{"version":3,"file":"proxy.js","names":[],"sources":["../../src/reactive/proxy.ts"],"sourcesContent":["/**\n * 创建一个介于vue的reactive和shallowReactive对象的中间层\n * @description\n * 如果对象含有嵌套对象，则**递归**进行中间代理\n *\n * @param o 代理对象\n * @param handler 处理函数\n * @param options 代理配置\n * @returns 中间代理对象\n */\nfunction createMiddleProxy(\n o: Record<string, any>,\n handler?: {\n set?: (field: string, val: any) => void\n get?: (field: string) => any\n changed?: (fields: string[]) => void\n },\n options?: {\n weakMap?: WeakMap<Record<string, any>, any>\n parentsField?: string\n changedFields?: string[]\n }\n) {\n let { weakMap, parentsField, changedFields = [] } = options || {}\n if (!weakMap) {\n weakMap = new WeakMap()\n }\n\n return new Proxy(o, {\n set(target, field: string, val) {\n const changedField = parentsField ? `${parentsField}.${field}` : field\n handler?.set?.(changedField, val)\n target[field] = val\n\n changedFields.push(changedField)\n Promise.resolve().then(() => {\n if (!changedFields.length) return\n handler?.changed?.([...changedFields])\n changedFields.splice(0)\n })\n\n return true\n },\n\n get(target, field: string) {\n handler?.get?.(field)\n\n const val = target[field]\n if (\n val !== null &&\n typeof val === 'object' &&\n !(val instanceof Date) &&\n !(val instanceof RegExp)\n ) {\n if (weakMap.has(val)) return weakMap.get(val)\n const valProxy = createMiddleProxy(val, handler, {\n weakMap,\n parentsField: parentsField ? `${parentsField}.${field}` : field,\n changedFields\n })\n weakMap.set(val, valProxy)\n\n return valProxy\n }\n\n return val\n }\n })\n}\n\n/**\n * 中间代理, 用于vue的reactive和shallowReactive方法的中间层\n * @param o 代理对象\n * @param config 代理配置\n * @returns\n */\nexport function middleProxy<O extends Record<string, any>>(\n o: O,\n handler?: {\n set?: (field: string, val: any) => void\n get?: (field: string) => any\n /**\n * 数值变更回调，传入的参数是本次模型值变更的所有字段\n * @param fields 变更的字段\n */\n changed?: (fields: string[]) => void\n }\n): O {\n return createMiddleProxy(o, handler) as O\n}\n"],"mappings":";;;;;;;;;;;AAUA,SAAS,kBACP,GACA,SAKA,SAKA;CACA,IAAI,EAAE,SAAS,cAAc,gBAAgB,CAAC,MAAM,WAAW,CAAC;CAChE,IAAI,CAAC,SACH,0BAAU,IAAI,QAAQ;CAGxB,OAAO,IAAI,MAAM,GAAG;EAClB,IAAI,QAAQ,OAAe,KAAK;GAC9B,MAAM,eAAe,eAAe,GAAG,aAAa,GAAG,UAAU;GACjE,SAAS,MAAM,cAAc,GAAG;GAChC,OAAO,SAAS;GAEhB,cAAc,KAAK,YAAY;GAC/B,QAAQ,QAAQ,CAAC,CAAC,WAAW;IAC3B,IAAI,CAAC,cAAc,QAAQ;IAC3B,SAAS,UAAU,CAAC,GAAG,aAAa,CAAC;IACrC,cAAc,OAAO,CAAC;GACxB,CAAC;GAED,OAAO;EACT;EAEA,IAAI,QAAQ,OAAe;GACzB,SAAS,MAAM,KAAK;GAEpB,MAAM,MAAM,OAAO;GACnB,IACE,QAAQ,QACR,OAAO,QAAQ,YACf,EAAE,eAAe,SACjB,EAAE,eAAe,SACjB;IACA,IAAI,QAAQ,IAAI,GAAG,GAAG,OAAO,QAAQ,IAAI,GAAG;IAC5C,MAAM,WAAW,kBAAkB,KAAK,SAAS;KAC/C;KACA,cAAc,eAAe,GAAG,aAAa,GAAG,UAAU;KAC1D;IACF,CAAC;IACD,QAAQ,IAAI,KAAK,QAAQ;IAEzB,OAAO;GACT;GAEA,OAAO;EACT;CACF,CAAC;AACH;;;;;;;AAQA,SAAgB,YACd,GACA,SASG;CACH,OAAO,kBAAkB,GAAG,OAAO;AACrC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veltra/utils",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.12",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"src"
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"build": "vp pack"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
|
-
"@cat-kit/core": ">=1.1.
|
|
27
|
-
"vue": ">=3.5.
|
|
26
|
+
"@cat-kit/core": ">=1.1.8",
|
|
27
|
+
"vue": ">=3.5.39"
|
|
28
28
|
}
|
|
29
29
|
}
|