You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
16 KiB
1 line
16 KiB
11 months ago
|
{"version":3,"file":"dom.mjs","sources":["../../../../packages/utils/dom.ts"],"sourcesContent":["import { isClient } from '@vueuse/core'\nimport { camelize, isObject } from './util'\nimport type { CSSProperties, ComponentPublicInstance, Ref } from 'vue'\n\nimport type { Nullable } from './types'\n\n/* istanbul ignore next */\nconst trimArr = function (s: string) {\n return (s || '').split(' ').filter((item) => !!item.trim())\n}\n\n/* istanbul ignore next */\nexport const on = function (\n element: HTMLElement | Document | Window,\n event: string,\n handler: EventListenerOrEventListenerObject,\n useCapture = false\n): void {\n if (element && event && handler) {\n element?.addEventListener(event, handler, useCapture)\n }\n}\n\n/* istanbul ignore next */\nexport const off = function (\n element: HTMLElement | Document | Window,\n event: string,\n handler: EventListenerOrEventListenerObject,\n useCapture = false\n): void {\n if (element && event && handler) {\n element?.removeEventListener(event, handler, useCapture)\n }\n}\n\n/* istanbul ignore next */\nexport const once = function (\n el: HTMLElement,\n event: string,\n fn: EventListener\n): void {\n const listener = function (this: any, ...args: any) {\n if (fn) {\n fn.apply(this, args)\n }\n off(el, event, listener)\n }\n on(el, event, listener)\n}\n\n/* istanbul ignore next */\nexport function hasClass(el: HTMLElement | Element, cls: string): boolean {\n if (!el || !cls) return false\n if (cls.indexOf(' ') !== -1)\n throw new Error('className should not contain space.')\n if (el.classList) {\n return el.classList.contains(cls)\n } else {\n const className = el.getAttribute('class') || ''\n return className.split(' ').includes(cls)\n }\n}\n\n/* istanbul ignore next */\nexport function addClass(el: HTMLElement | Element, cls: string): void {\n if (!el) return\n let className = el.getAttribute('class') || ''\n const curClass = trimArr(className)\n const classes = (cls || '')\n .split(' ')\n .filter((item) => !curClass.includes(item) && !!item.trim())\n\n if (el.classList) {\n el.classList.add(...classes)\n } else {\n className += ` ${classes.join(' ')}`\n el.setAttribute('class', className)\n }\n}\n\n/* istanbul ignore next */\nexport function removeClass(el: HTMLElement | Element, cls: string): void {\n if (!el || !cls) return\n const classes = trimArr(cls)\n let curClass = el.getAttribute('class') || ''\n\n if (el.classList) {\n el.classList.remove(...classes)\n return\n }\n classes.forEach((item) => {\n curClass = curClass.replace(` ${item} `, ' ')\n })\n const className = trimArr(curClass).join(' ')\n el.setAttribute('class', className)\n}\n\n/* istanbul ignore next */\n// Here I want to use the type CSSProperties, but the definition for CSSProperties\n// has { [index: number]: string } in its type annotation, which does not satisfy the method\n// camelize(s: string)\n// Same as the return type\nexport const getStyle = function (\n element: HTMLElement,\n styleName: string\n): string {\n if (!isClient) return ''\n if (!element || !styleName) return ''\n styleName = camelize(styleName)\n if (styleName === 'float') {\n styleName = 'cssFloat'\n }\n try {\n const style = element.style[styleName]\n if (style) return style\n const computed = document.defaultView?.getComputedStyle(element, '')\n return computed ? computed[styleName] : ''\n } catch (e) {\n return element.style[styleName]\n }\n}\n\n/* istanbul ignore next */\nexport function setStyle(\n element: HTMLElement,\n styleName: CSSProperties | string,\n value?: string\n): void {\n if (!element || !styleName) return\n\n if (isObject(styleName)) {\n Object.keys(styleName).forEach((prop) => {\n setStyle(element, prop, styleName[prop])\n })\n } else {\n styleName = camelize(styleName)\n element.style[styleName] = value\n }\n}\n\nexport function removeStyle(\n element: HTMLElement,\n style: CSSProperties | string\n) {\n if (!element || !style) return\n\n if (isObject(style
|