UNPKG

naive-ui

Version:

A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast

1,533 lines (1,480 loc) 4.03 MB
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) : typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.naive = {}, global.Vue)); })(this, (function (exports, vue) { 'use strict'; let onceCbs = []; const paramsMap = new WeakMap(); function flushOnceCallbacks() { onceCbs.forEach(cb => cb(...paramsMap.get(cb))); onceCbs = []; } function beforeNextFrameOnce(cb, ...params) { paramsMap.set(cb, params); if (onceCbs.includes(cb)) return; onceCbs.push(cb) === 1 && requestAnimationFrame(flushOnceCallbacks); } function getParentNode$1(node) { // document type if (node.nodeType === 9) { return null; } return node.parentNode; } function getScrollParent$1(node) { if (node === null) return null; const parentNode = getParentNode$1(node); if (parentNode === null) { return null; } // Document if (parentNode.nodeType === 9) { return document.documentElement; } // Element if (parentNode.nodeType === 1) { // Firefox want us to check `-x` and `-y` variations as well const { overflow, overflowX, overflowY } = getComputedStyle(parentNode); if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) { return parentNode; } } return getScrollParent$1(parentNode); } function unwrapElement(target) { if (typeof target === 'string') return document.querySelector(target); if (typeof target === 'function') return target(); return target; } function happensIn(e, dataSetPropName) { let { target } = e; while (target) { if (target.dataset) { if (target.dataset[dataSetPropName] !== undefined) return true; } target = target.parentElement; } return false; } function getPreciseEventTarget(event) { return event.composedPath()[0] || null; } function parseResponsiveProp(reponsiveProp) { if (typeof reponsiveProp === "number") { return { '': reponsiveProp.toString() }; } const params = {}; reponsiveProp.split(/ +/).forEach(pairLiteral => { if (pairLiteral === '') return; const [prefix, value] = pairLiteral.split(':'); if (value === undefined) { params[''] = prefix; } else { params[prefix] = value; } }); return params; } function parseResponsivePropValue(reponsiveProp, activeKeyOrSize) { var _a; if (reponsiveProp === undefined || reponsiveProp === null) return undefined; const classObj = parseResponsiveProp(reponsiveProp); if (activeKeyOrSize === undefined) return classObj['']; if (typeof activeKeyOrSize === 'string') { return (_a = classObj[activeKeyOrSize]) !== null && _a !== void 0 ? _a : classObj['']; } else if (Array.isArray(activeKeyOrSize)) { for (let i = activeKeyOrSize.length - 1; i >= 0; --i) { const key = activeKeyOrSize[i]; if (key in classObj) return classObj[key]; } return classObj['']; } else { // Here we suppose all the keys are number formatted let activeValue = undefined; let activeKey = -1; Object.keys(classObj).forEach(key => { const keyAsNum = Number(key); if (!Number.isNaN(keyAsNum) && activeKeyOrSize >= keyAsNum && keyAsNum >= activeKey) { activeKey = keyAsNum; activeValue = classObj[key]; } }); return activeValue; } } function depx(value) { if (typeof value === 'string') { if (value.endsWith('px')) { return Number(value.slice(0, value.length - 2)); } return Number(value); } return value; } function pxfy(value) { if (value === undefined || value === null) return undefined; if (typeof value === 'number') return `${value}px`; if (value.endsWith('px')) return value; return `${value}px`; } function getMargin(value, position) { const parts = value.trim().split(/\s+/g); const margin = { top: parts[0] }; switch (parts.length) { case 1: margin.right = parts[0]; margin.bottom = parts[0]; margin.left = parts[0]; break; case 2: margin.right = parts[1]; margin.left = parts[1]; margin.bottom = parts[0]; break; case 3: margin.right = parts[1]; margin.bottom = parts[2]; margin.left = parts[1]; break; case 4: margin.right = parts[1]; margin.bottom = parts[2]; margin.left = parts[3]; break; default: throw new Error('[seemly/getMargin]:' + value + ' is not a valid value.'); } if (position === undefined) return margin; return margin[position]; } function getGap(value, orient) { const [rowGap, colGap] = value.split(' '); return { row: rowGap, col: colGap || rowGap }; } var colors = { black: '#000', silver: '#C0C0C0', gray: '#808080', white: '#FFF', maroon: '#800000', red: '#F00', purple: '#800080', fuchsia: '#F0F', green: '#008000', lime: '#0F0', olive: '#808000', yellow: '#FF0', navy: '#000080', blue: '#00F', teal: '#008080', aqua: '#0FF', transparent: '#0000' }; // All the algorithms credit to https://stackoverflow.com/questions/36721830/convert-hsl-to-rgb-and-hex/54014428#54014428 // original author: Kamil Kiełczewski /** * @param h 360 * @param s 100 * @param l 100 * @returns [h, s, v] 360, 100, 100 */ function hsl2hsv(h, s, l) { s /= 100; l /= 100; const v = s * Math.min(l, 1 - l) + l; return [h, v ? (2 - 2 * l / v) * 100 : 0, v * 100]; } /** * @param h 360 * @param s 100 * @param v 100 * @returns [h, s, l] 360, 100, 100 */ function hsv2hsl(h, s, v) { s /= 100; v /= 100; const l = v - v * s / 2; const m = Math.min(l, 1 - l); return [h, m ? (v - l) / m * 100 : 0, l * 100]; } /** * @param h 360 * @param s 100 * @param v 100 * @returns [r, g, b] 255, 255, 255 */ function hsv2rgb(h, s, v) { s /= 100; v /= 100; let f = (n, k = (n + h / 60) % 6) => v - v * s * Math.max(Math.min(k, 4 - k, 1), 0); return [f(5) * 255, f(3) * 255, f(1) * 255]; } /** * @param r 255 * @param g 255 * @param b 255 * @returns [360, 100, 100] */ function rgb2hsv(r, g, b) { r /= 255; g /= 255; b /= 255; let v = Math.max(r, g, b), c = v - Math.min(r, g, b); let h = c && (v == r ? (g - b) / c : v == g ? 2 + (b - r) / c : 4 + (r - g) / c); return [60 * (h < 0 ? h + 6 : h), v && c / v * 100, v * 100]; } /** * @param r 255 * @param g 255 * @param b 255 * @returns [360, 100, 100] */ function rgb2hsl(r, g, b) { r /= 255; g /= 255; b /= 255; let v = Math.max(r, g, b), c = v - Math.min(r, g, b), f = 1 - Math.abs(v + v - c - 1); let h = c && (v == r ? (g - b) / c : v == g ? 2 + (b - r) / c : 4 + (r - g) / c); return [60 * (h < 0 ? h + 6 : h), f ? c / f * 100 : 0, (v + v - c) * 50]; } /** * @param h 360 * @param s 100 * @param l 100 * @returns [255, 255, 255] */ function hsl2rgb(h, s, l) { s /= 100; l /= 100; let a = s * Math.min(l, 1 - l); let f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); return [f(0) * 255, f(8) * 255, f(4) * 255]; } const prefix$1 = '^\\s*'; const suffix = '\\s*$'; const percent = '\\s*((\\.\\d+)|(\\d+(\\.\\d*)?))%\\s*'; // 4 offset const float = '\\s*((\\.\\d+)|(\\d+(\\.\\d*)?))\\s*'; // 4 offset const hex = '([0-9A-Fa-f])'; const dhex = '([0-9A-Fa-f]{2})'; const hslRegex = new RegExp(`${prefix$1}hsl\\s*\\(${float},${percent},${percent}\\)${suffix}`); const hsvRegex = new RegExp(`${prefix$1}hsv\\s*\\(${float},${percent},${percent}\\)${suffix}`); const hslaRegex = new RegExp(`${prefix$1}hsla\\s*\\(${float},${percent},${percent},${float}\\)${suffix}`); const hsvaRegex = new RegExp(`${prefix$1}hsva\\s*\\(${float},${percent},${percent},${float}\\)${suffix}`); const rgbRegex = new RegExp(`${prefix$1}rgb\\s*\\(${float},${float},${float}\\)${suffix}`); const rgbaRegex = new RegExp(`${prefix$1}rgba\\s*\\(${float},${float},${float},${float}\\)${suffix}`); const sHexRegex = new RegExp(`${prefix$1}#${hex}${hex}${hex}${suffix}`); const hexRegex = new RegExp(`${prefix$1}#${dhex}${dhex}${dhex}${suffix}`); const sHexaRegex = new RegExp(`${prefix$1}#${hex}${hex}${hex}${hex}${suffix}`); const hexaRegex = new RegExp(`${prefix$1}#${dhex}${dhex}${dhex}${dhex}${suffix}`); function parseHex(value) { return parseInt(value, 16); } /** * Convert color string to hsla array * @param color format like hsl(180, 100%, 100%), hsla(180, 100%, 100%, 1) * @returns */ function hsla(color) { try { let i; if (i = hslaRegex.exec(color)) { return [roundDeg(i[1]), roundPercent(i[5]), roundPercent(i[9]), roundAlpha(i[13])]; } else if (i = hslRegex.exec(color)) { return [roundDeg(i[1]), roundPercent(i[5]), roundPercent(i[9]), 1]; } throw new Error(`[seemly/hsla]: Invalid color value ${color}.`); } catch (e) { throw e; } } /** * Convert color string to hsva array * @param color format like hsv(180, 100%, 100%), hsva(180, 100%, 100%, 1) * @returns */ function hsva(color) { try { let i; if (i = hsvaRegex.exec(color)) { return [roundDeg(i[1]), roundPercent(i[5]), roundPercent(i[9]), roundAlpha(i[13])]; } else if (i = hsvRegex.exec(color)) { return [roundDeg(i[1]), roundPercent(i[5]), roundPercent(i[9]), 1]; } throw new Error(`[seemly/hsva]: Invalid color value ${color}.`); } catch (e) { throw e; } } /** * Convert color string to rgba array. * @param color format like #000[0], #000000[00], rgb(0, 0, 0), rgba(0, 0, 0, 0) and basic color keywords https://www.w3.org/TR/css-color-3/#html4 and transparent * @returns */ function rgba(color) { try { let i; if (i = hexRegex.exec(color)) { return [parseHex(i[1]), parseHex(i[2]), parseHex(i[3]), 1]; } else if (i = rgbRegex.exec(color)) { return [roundChannel(i[1]), roundChannel(i[5]), roundChannel(i[9]), 1]; } else if (i = rgbaRegex.exec(color)) { return [roundChannel(i[1]), roundChannel(i[5]), roundChannel(i[9]), roundAlpha(i[13])]; } else if (i = sHexRegex.exec(color)) { return [parseHex(i[1] + i[1]), parseHex(i[2] + i[2]), parseHex(i[3] + i[3]), 1]; } else if (i = hexaRegex.exec(color)) { return [parseHex(i[1]), parseHex(i[2]), parseHex(i[3]), roundAlpha(parseHex(i[4]) / 255)]; } else if (i = sHexaRegex.exec(color)) { return [parseHex(i[1] + i[1]), parseHex(i[2] + i[2]), parseHex(i[3] + i[3]), roundAlpha(parseHex(i[4] + i[4]) / 255)]; } else if (color in colors) { return rgba(colors[color]); } throw new Error(`[seemly/rgba]: Invalid color value ${color}.`); } catch (e) { throw e; } } function normalizeAlpha$1(alphaValue) { return alphaValue > 1 ? 1 : alphaValue < 0 ? 0 : alphaValue; } function stringifyRgb(r, g, b) { return `rgb(${roundChannel(r)}, ${roundChannel(g)}, ${roundChannel(b)})`; } function stringifyRgba(r, g, b, a) { return `rgba(${roundChannel(r)}, ${roundChannel(g)}, ${roundChannel(b)}, ${normalizeAlpha$1(a)})`; } function compositeChannel(v1, a1, v2, a2, a) { return roundChannel((v1 * a1 * (1 - a2) + v2 * a2) / a); } function composite(background, overlay) { if (!Array.isArray(background)) background = rgba(background); if (!Array.isArray(overlay)) overlay = rgba(overlay); const a1 = background[3]; const a2 = overlay[3]; const alpha = roundAlpha(a1 + a2 - a1 * a2); return stringifyRgba(compositeChannel(background[0], a1, overlay[0], a2, alpha), compositeChannel(background[1], a1, overlay[1], a2, alpha), compositeChannel(background[2], a1, overlay[2], a2, alpha), alpha); } function changeColor(base, options) { const [r, g, b, a = 1] = Array.isArray(base) ? base : rgba(base); if (options.alpha) { return stringifyRgba(r, g, b, options.alpha); } return stringifyRgba(r, g, b, a); } function scaleColor(base, options) { const [r, g, b, a = 1] = Array.isArray(base) ? base : rgba(base); const { lightness = 1, alpha = 1 } = options; return toRgbaString([r * lightness, g * lightness, b * lightness, a * alpha]); } function roundAlpha(value) { const v = Math.round(Number(value) * 100) / 100; if (v > 1) return 1; if (v < 0) return 0; return v; } function roundDeg(value) { const v = Math.round(Number(value)); if (v >= 360) return 0; if (v < 0) return 0; return v; } function roundChannel(value) { const v = Math.round(Number(value)); if (v > 255) return 255; if (v < 0) return 0; return v; } function roundPercent(value) { const v = Math.round(Number(value)); if (v > 100) return 100; if (v < 0) return 0; return v; } function toRgbString(base) { const [r, g, b] = Array.isArray(base) ? base : rgba(base); return stringifyRgb(r, g, b); } function toRgbaString(base) { const [r, g, b] = base; if (3 in base) { return `rgba(${roundChannel(r)}, ${roundChannel(g)}, ${roundChannel(b)}, ${roundAlpha(base[3])})`; } return `rgba(${roundChannel(r)}, ${roundChannel(g)}, ${roundChannel(b)}, 1)`; } function toHsvString(base) { return `hsv(${roundDeg(base[0])}, ${roundPercent(base[1])}%, ${roundPercent(base[2])}%)`; } function toHsvaString(base) { const [h, s, v] = base; if (3 in base) { return `hsva(${roundDeg(h)}, ${roundPercent(s)}%, ${roundPercent(v)}%, ${roundAlpha(base[3])})`; } return `hsva(${roundDeg(h)}, ${roundPercent(s)}%, ${roundPercent(v)}%, 1)`; } function toHslString(base) { return `hsl(${roundDeg(base[0])}, ${roundPercent(base[1])}%, ${roundPercent(base[2])}%)`; } function toHslaString(base) { const [h, s, l] = base; if (3 in base) { return `hsla(${roundDeg(h)}, ${roundPercent(s)}%, ${roundPercent(l)}%, ${roundAlpha(base[3])})`; } return `hsla(${roundDeg(h)}, ${roundPercent(s)}%, ${roundPercent(l)}%, 1)`; } /** * * @param base [255, 255, 255, 255], [255, 255, 255], any hex string * @returns */ function toHexaString(base) { if (typeof base === 'string') { let i; if (i = hexRegex.exec(base)) { return `${i[0]}FF`; } else if (i = hexaRegex.exec(base)) { return i[0]; } else if (i = sHexRegex.exec(base)) { return `#${i[1]}${i[1]}${i[2]}${i[2]}${i[3]}${i[3]}FF`; } else if (i = sHexaRegex.exec(base)) { return `#${i[1]}${i[1]}${i[2]}${i[2]}${i[3]}${i[3]}${i[4]}${i[4]}`; } throw new Error(`[seemly/toHexString]: Invalid hex value ${base}.`); } const hex = `#${base.slice(0, 3).map(unit => roundChannel(unit).toString(16).toUpperCase().padStart(2, '0')).join('')}`; const a = base.length === 3 ? 'FF' : roundChannel(base[3] * 255).toString(16).padStart(2, '0').toUpperCase(); return hex + a; } /** * * @param base [255, 255, 255, 255], [255, 255, 255], any hex string * @returns */ function toHexString(base) { if (typeof base === 'string') { let i; if (i = hexRegex.exec(base)) { return i[0]; } else if (i = hexaRegex.exec(base)) { return i[0].slice(0, 7); } else if (i = sHexRegex.exec(base) || sHexaRegex.exec(base)) { return `#${i[1]}${i[1]}${i[2]}${i[2]}${i[3]}${i[3]}`; } throw new Error(`[seemly/toHexString]: Invalid hex value ${base}.`); } return `#${base.slice(0, 3).map(unit => roundChannel(unit).toString(16).toUpperCase().padStart(2, '0')).join('')}`; } function createId(length = 8) { return Math.random().toString(16).slice(2, 2 + length); } function repeat(count, v) { const ret = []; for (let i = 0; i < count; ++i) { ret.push(v); } return ret; } function indexMap(count, createValue) { const ret = []; if (!createValue) { for (let i = 0; i < count; ++i) { ret.push(i); } return ret; } for (let i = 0; i < count; ++i) { ret.push(createValue(i)); } return ret; } function getSlot$1(instance, slotName = "default", fallback = []) { const slots = instance.$slots; const slot = slots[slotName]; if (slot === void 0) return fallback; return slot(); } function getVNodeChildren(vNode, slotName = "default", fallback = []) { const { children } = vNode; if (children !== null && typeof children === "object" && !Array.isArray(children)) { const slot = children[slotName]; if (typeof slot === "function") { return slot(); } } return fallback; } function keep(object, keys = [], rest) { const keepedObject = {}; keys.forEach(key => { keepedObject[key] = object[key]; }); return Object.assign(keepedObject, rest); } function omit(object, keys = [], rest) { const omitedObject = {}; const originalKeys = Object.getOwnPropertyNames(object); originalKeys.forEach(originalKey => { if (!keys.includes(originalKey)) { omitedObject[originalKey] = object[originalKey]; } }); return Object.assign(omitedObject, rest); } function flatten$3(vNodes, filterCommentNode = true, result = []) { vNodes.forEach(vNode => { if (vNode === null) return; if (typeof vNode !== "object") { if (typeof vNode === "string" || typeof vNode === "number") { result.push(vue.createTextVNode(String(vNode))); } return; } if (Array.isArray(vNode)) { flatten$3(vNode, filterCommentNode, result); return; } if (vNode.type === vue.Fragment) { if (vNode.children === null) return; if (Array.isArray(vNode.children)) { flatten$3(vNode.children, filterCommentNode, result); } } else { if (vNode.type === vue.Comment && filterCommentNode) return; result.push(vNode); } }); return result; } function call(funcs, ...args) { if (Array.isArray(funcs)) { funcs.forEach(func => call(func, ...args)); } else { return funcs(...args); } } function keysOf(obj) { return Object.keys(obj); } function render$1(r, ...args) { if (typeof r === "function") { return r(...args); } else if (typeof r === "string") { return vue.createTextVNode(r); } else if (typeof r === "number") { return vue.createTextVNode(String(r)); } else { return null; } } const warnedMessages = /* @__PURE__ */new Set(); function warnOnce(location, message) { const mergedMessage = `[naive/${location}]: ${message}`; if (warnedMessages.has(mergedMessage)) return; warnedMessages.add(mergedMessage); console.error(mergedMessage); } function warn$2(location, message) { console.error(`[naive/${location}]: ${message}`); } function error(location, message, error2) { console.error(`[naive/${location}]: ${message}`, error2); } function throwError(location, message) { throw new Error(`[naive/${location}]: ${message}`); } function smallerSize(size) { switch (size) { case "tiny": return "mini"; case "small": return "tiny"; case "medium": return "small"; case "large": return "medium"; case "huge": return "large"; } throw new Error(`${size} has no smaller size.`); } function getTitleAttribute(value) { switch (typeof value) { case "string": return value || void 0; case "number": return String(value); default: return void 0; } } function getFirstSlotVNode(slots, slotName = "default", props = void 0) { const slot = slots[slotName]; if (!slot) { warn$2("getFirstSlotVNode", `slot[${slotName}] is empty`); return null; } const slotContent = flatten$3(slot(props)); if (slotContent.length === 1) { return slotContent[0]; } else { warn$2("getFirstSlotVNode", `slot[${slotName}] should have exactly one child`); return null; } } function createDataKey(key) { return typeof key === "string" ? `s-${key}` : `n-${key}`; } function createRefSetter(ref) { return inst => { if (inst) { ref.value = inst.$el; } else { ref.value = null; } }; } function createInjectionKey(key) { return key; } function ensureValidVNode(vnodes) { return vnodes.some(child => { if (!vue.isVNode(child)) { return true; } if (child.type === vue.Comment) { return false; } if (child.type === vue.Fragment && !ensureValidVNode(child.children)) { return false; } return true; }) ? vnodes : null; } function resolveSlot(slot, fallback) { return slot && ensureValidVNode(slot()) || fallback(); } function resolveSlotWithProps(slot, props, fallback) { return slot && ensureValidVNode(slot(props)) || fallback(props); } function resolveWrappedSlot(slot, wrapper) { const children = slot && ensureValidVNode(slot()); return wrapper(children || null); } function resolveWrappedSlotWithProps(slot, props, wrapper) { const children = slot && ensureValidVNode(slot(props)); return wrapper(children || null); } function isSlotEmpty(slot) { return !(slot && ensureValidVNode(slot())); } function mergeEventHandlers(handlers) { const filteredHandlers = handlers.filter(handler => handler !== void 0); if (filteredHandlers.length === 0) return void 0; if (filteredHandlers.length === 1) return filteredHandlers[0]; return e => { handlers.forEach(handler => { if (handler) { handler(e); } }); }; } function isNodeVShowFalse(vNode) { const showDir = vNode.dirs?.find(({ dir }) => dir === vue.vShow); return !!(showDir && showDir.value === false); } const Wrapper = vue.defineComponent({ render() { return this.$slots.default?.(); } }); const pureNumberRegex = /^(\d|\.)+$/; const numberRegex = /(\d|\.)+/; function formatLength(length, { c = 1, offset = 0, attachPx = true } = {}) { if (typeof length === "number") { const result = (length + offset) * c; if (result === 0) return "0"; return `${result}px`; } else if (typeof length === "string") { if (pureNumberRegex.test(length)) { const result = (Number(length) + offset) * c; if (attachPx) { if (result === 0) return "0"; return `${result}px`; } else { return `${result}`; } } else { const result = numberRegex.exec(length); if (!result) return length; return length.replace(numberRegex, String((Number(result[0]) + offset) * c)); } } return length; } function color2Class(color) { return color.replace(/#|\(|\)|,|\s|\./g, "_"); } function rtlInset(inset) { const { left, right, top, bottom } = getMargin(inset); return `${top} ${right} ${bottom} ${left}`; } function ampCount(selector) { let cnt = 0; for (let i = 0; i < selector.length; ++i) { if (selector[i] === '&') ++cnt; } return cnt; } /** * Don't just use ',' to separate css selector. For example: * x:(a, b) {} will be split into 'x:(a' and 'b)', which is not expected. * Make sure comma doesn't exist inside parentheses. */ const separatorRegex = /\s*,(?![^(]*\))\s*/g; const extraSpaceRegex = /\s+/g; /** * selector must includes '&' * selector is trimmed * every part of amp is trimmed */ function resolveSelectorWithAmp(amp, selector) { const nextAmp = []; selector.split(separatorRegex).forEach(partialSelector => { let round = ampCount(partialSelector); // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions if (!round) { amp.forEach(partialAmp => { nextAmp.push( // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions (partialAmp && partialAmp + ' ') + partialSelector); }); return; } else if (round === 1) { amp.forEach(partialAmp => { nextAmp.push(partialSelector.replace('&', partialAmp)); }); return; } let partialNextAmp = [partialSelector]; // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions while (round--) { const nextPartialNextAmp = []; partialNextAmp.forEach(selectorItr => { amp.forEach(partialAmp => { nextPartialNextAmp.push(selectorItr.replace('&', partialAmp)); }); }); partialNextAmp = nextPartialNextAmp; } partialNextAmp.forEach(part => nextAmp.push(part)); }); return nextAmp; } /** * selector mustn't includes '&' * selector is trimmed */ function resolveSelector(amp, selector) { const nextAmp = []; selector.split(separatorRegex).forEach(partialSelector => { amp.forEach(partialAmp => { // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions nextAmp.push((partialAmp && partialAmp + ' ') + partialSelector); }); }); return nextAmp; } function parseSelectorPath(selectorPaths) { let amp = ['']; selectorPaths.forEach(selector => { // eslint-disable-next-line selector = selector && selector.trim(); if ( // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions !selector) { /** * if it's a empty selector, do nothing */ return; } // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions if (selector.includes('&')) { amp = resolveSelectorWithAmp(amp, selector); } else { amp = resolveSelector(amp, selector); } }); return amp.join(', ').replace(extraSpaceRegex, ' '); } function removeElement(el) { /* istanbul ignore if */ // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions if (!el) return; const parentElement = el.parentElement; /* istanbul ignore else */ // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions if (parentElement) parentElement.removeChild(el); } function queryElement(id, parent) { return (parent !== null && parent !== void 0 ? parent : document.head).querySelector(`style[cssr-id="${id}"]`); } function createElement(id) { const el = document.createElement('style'); el.setAttribute('cssr-id', id); return el; } function isMediaOrSupports(selector) { // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions if (!selector) return false; return /^\s*@(s|m)/.test(selector); } const kebabRegex = /[A-Z]/g; function kebabCase(pattern) { return pattern.replace(kebabRegex, match => '-' + match.toLowerCase()); } /** TODO: refine it to solve nested object */ function unwrapProperty(prop, indent = ' ') { if (typeof prop === 'object' && prop !== null) { return ' {\n' + Object.entries(prop).map(v => { return indent + ` ${kebabCase(v[0])}: ${v[1]};`; }).join('\n') + '\n' + indent + '}'; } return `: ${prop};`; } /** unwrap properties */ function unwrapProperties(props, instance, params) { if (typeof props === 'function') { return props({ context: instance.context, props: params }); } return props; } function createStyle(selector, props, instance, params) { if (!props) return ''; // eslint-disable-next-line const unwrappedProps = unwrapProperties(props, instance, params); if (!unwrappedProps) return ''; if (typeof unwrappedProps === 'string') { return `${selector} {\n${unwrappedProps}\n}`; } const propertyNames = Object.keys(unwrappedProps); if (propertyNames.length === 0) { if (instance.config.keepEmptyBlock) return selector + ' {\n}'; return ''; } const statements = selector ? [selector + ' {'] : []; propertyNames.forEach(propertyName => { const property = unwrappedProps[propertyName]; if (propertyName === 'raw') { statements.push('\n' + property + '\n'); return; } propertyName = kebabCase(propertyName); if (property !== null && property !== undefined) { statements.push(` ${propertyName}${unwrapProperty(property)}`); } }); if (selector) { statements.push('}'); } return statements.join('\n'); } function loopCNodeListWithCallback(children, options, callback) { /* istanbul ignore if */ if (!children) return; children.forEach(child => { if (Array.isArray(child)) { loopCNodeListWithCallback(child, options, callback); } else if (typeof child === 'function') { const grandChildren = child(options); if (Array.isArray(grandChildren)) { loopCNodeListWithCallback(grandChildren, options, callback); } else if (grandChildren) { callback(grandChildren); } } else if (child) { callback(child); } }); } function traverseCNode(node, selectorPaths, styles, instance, params) { const $ = node.$; let blockSelector = ''; if (!$ || typeof $ === 'string') { if (isMediaOrSupports($)) { blockSelector = $; } else { // as a string selector selectorPaths.push($); } } else if (typeof $ === 'function') { const selector = $({ context: instance.context, props: params }); if (isMediaOrSupports(selector)) { blockSelector = selector; } else { // as a lazy selector selectorPaths.push(selector); } } else { // as a option selector if ($.before) $.before(instance.context); if (!$.$ || typeof $.$ === 'string') { if (isMediaOrSupports($.$)) { blockSelector = $.$; } else { // as a string selector selectorPaths.push($.$); } } else /* istanbul ignore else */if ($.$) { const selector = $.$({ context: instance.context, props: params }); if (isMediaOrSupports(selector)) { blockSelector = selector; } else { // as a lazy selector selectorPaths.push(selector); } } } const selector = parseSelectorPath(selectorPaths); const style = createStyle(selector, node.props, instance, params); if (blockSelector) { styles.push(`${blockSelector} {`); } else if (style.length) { styles.push(style); } if (node.children) { loopCNodeListWithCallback(node.children, { context: instance.context, props: params }, childNode => { if (typeof childNode === 'string') { const style = createStyle(selector, { raw: childNode }, instance, params); styles.push(style); } else { traverseCNode(childNode, selectorPaths, styles, instance, params); } }); } selectorPaths.pop(); if (blockSelector) { styles.push('}'); } if ($ && $.after) $.after(instance.context); } function render(node, instance, props) { const styles = []; traverseCNode(node, [], styles, instance, props); return styles.join('\n\n'); } /* eslint-disable */ // Inspired by https://github.com/garycourt/murmurhash-js // Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86 function murmur2(str) { // 'm' and 'r' are mixing constants generated offline. // They're not really 'magic', they just happen to work well. // const m = 0x5bd1e995; // const r = 24; // Initialize the hash var h = 0; // Mix 4 bytes at a time into the hash var k, i = 0, len = str.length; for (; len >= 4; ++i, len -= 4) { k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24; k = /* Math.imul(k, m): */ (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16); k ^= /* k >>> r: */ k >>> 24; h = /* Math.imul(k, m): */ (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^ /* Math.imul(h, m): */ (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16); } // Handle the last few bytes of the input array switch (len) { case 3: h ^= (str.charCodeAt(i + 2) & 0xff) << 16; case 2: h ^= (str.charCodeAt(i + 1) & 0xff) << 8; case 1: h ^= str.charCodeAt(i) & 0xff; h = /* Math.imul(h, m): */ (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16); } // Do a few final mixes of the hash to ensure the last few // bytes are well-incorporated. h ^= h >>> 13; h = /* Math.imul(h, m): */ (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16); return ((h ^ h >>> 15) >>> 0).toString(36); } /* eslint-disable @typescript-eslint/prefer-ts-expect-error */ /* eslint-disable @typescript-eslint/strict-boolean-expressions */ if (typeof window !== 'undefined') { window.__cssrContext = {}; } function unmount(instance, node, id, parent) { const { els } = node; // If id is undefined, unmount all styles if (id === undefined) { els.forEach(removeElement); node.els = []; } else { const target = queryElement(id, parent); // eslint-disable-next-line if (target && els.includes(target)) { removeElement(target); node.els = els.filter(el => el !== target); } } } function addElementToList(els, target) { els.push(target); } function mount(instance, node, id, props, head, force, anchorMetaName, parent, ssrAdapter // eslint-disable-next-line @typescript-eslint/no-invalid-void-type ) { let style; if (id === undefined) { style = node.render(props); id = murmur2(style); } if (ssrAdapter) { ssrAdapter.adapter(id, style !== null && style !== void 0 ? style : node.render(props)); return; } if (parent === undefined) { parent = document.head; } const queriedTarget = queryElement(id, parent); if (queriedTarget !== null && !force) { return queriedTarget; } const target = queriedTarget !== null && queriedTarget !== void 0 ? queriedTarget : createElement(id); if (style === undefined) style = node.render(props); target.textContent = style; if (queriedTarget !== null) return queriedTarget; if (anchorMetaName) { const anchorMetaEl = parent.querySelector(`meta[name="${anchorMetaName}"]`); if (anchorMetaEl) { parent.insertBefore(target, anchorMetaEl); addElementToList(node.els, target); return target; } } if (head) { parent.insertBefore(target, parent.querySelector('style, link')); } else { parent.appendChild(target); } addElementToList(node.els, target); return target; } function wrappedRender(props) { return render(this, this.instance, props); } // do not guard node calling, it should throw an error. function wrappedMount(options = {} // eslint-disable-next-line @typescript-eslint/no-invalid-void-type ) { const { id, ssr, props, head = false, force = false, anchorMetaName, parent } = options; const targetElement = mount(this.instance, this, id, props, head, force, anchorMetaName, parent, ssr); return targetElement; } function wrappedUnmount(options = {}) { /* istanbul ignore next */ // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions const { id, parent } = options; unmount(this.instance, this, id, parent); } const createCNode = function (instance, $, props, children) { return { instance, $, props, children, els: [], render: wrappedRender, mount: wrappedMount, unmount: wrappedUnmount }; }; const c$2 = function (instance, $, props, children) { if (Array.isArray($)) { return createCNode(instance, { $: null }, null, $); } else if (Array.isArray(props)) { return createCNode(instance, $, null, props); } else if (Array.isArray(children)) { return createCNode(instance, $, props, children); } else { return createCNode(instance, $, props, null); } }; function CssRender(config = {}) { const cssr = { c: (...args) => c$2(cssr, ...args), use: (plugin, ...args) => plugin.install(cssr, ...args), find: queryElement, context: {}, config }; return cssr; } function exists(id, ssr) { if (id === undefined) return false; if (ssr) { const { context: { ids } } = ssr; return ids.has(id); } return queryElement(id) !== null; } /* eslint-disable @typescript-eslint/restrict-template-expressions */ /* eslint-disable @typescript-eslint/strict-boolean-expressions */ function plugin$1(options) { let _bPrefix = '.'; let _ePrefix = '__'; let _mPrefix = '--'; let c; if (options) { let t = options.blockPrefix; if (t) { _bPrefix = t; } t = options.elementPrefix; if (t) { _ePrefix = t; } t = options.modifierPrefix; if (t) { _mPrefix = t; } } const _plugin = { install(instance) { c = instance.c; const ctx = instance.context; ctx.bem = {}; ctx.bem.b = null; ctx.bem.els = null; } }; function b(arg) { let memorizedB; let memorizedE; return { before(ctx) { memorizedB = ctx.bem.b; memorizedE = ctx.bem.els; ctx.bem.els = null; }, after(ctx) { ctx.bem.b = memorizedB; ctx.bem.els = memorizedE; }, $({ context, props }) { arg = typeof arg === 'string' ? arg : arg({ context, props }); context.bem.b = arg; return `${(props === null || props === void 0 ? void 0 : props.bPrefix) || _bPrefix}${context.bem.b}`; } }; } function e(arg) { let memorizedE; return { before(ctx) { memorizedE = ctx.bem.els; }, after(ctx) { ctx.bem.els = memorizedE; }, $({ context, props }) { arg = typeof arg === 'string' ? arg : arg({ context, props }); context.bem.els = arg.split(',').map(v => v.trim()); return context.bem.els.map(el => `${(props === null || props === void 0 ? void 0 : props.bPrefix) || _bPrefix}${context.bem.b}${_ePrefix}${el}`).join(', '); } }; } function m(arg) { return { $({ context, props }) { arg = typeof arg === 'string' ? arg : arg({ context, props }); const modifiers = arg.split(',').map(v => v.trim()); function elementToSelector(el) { return modifiers.map(modifier => `&${(props === null || props === void 0 ? void 0 : props.bPrefix) || _bPrefix}${context.bem.b}${el !== undefined ? `${_ePrefix}${el}` : ''}${_mPrefix}${modifier}`).join(', '); } const els = context.bem.els; if (els !== null) { if (els.length >= 2) { throw Error(`[css-render/plugin-bem]: m(${arg}) is invalid, using modifier inside multiple elements is not allowed`); } return elementToSelector(els[0]); } else { return elementToSelector(); } } }; } function notM(arg) { return { $({ context, props }) { arg = typeof arg === 'string' ? arg : arg({ context, props }); const els = context.bem.els; if (els !== null && els.length >= 2) { throw Error(`[css-render/plugin-bem]: notM(${arg}) is invalid, using modifier inside multiple elements is not allowed`); } return `&:not(${(props === null || props === void 0 ? void 0 : props.bPrefix) || _bPrefix}${context.bem.b}${els !== null && els.length > 0 ? `${_ePrefix}${els[0]}` : ''}${_mPrefix}${arg})`; } }; } const cB = (...args) => c(b(args[0]), args[1], args[2]); const cE = (...args) => c(e(args[0]), args[1], args[2]); const cM = (...args) => c(m(args[0]), args[1], args[2]); const cNotM = (...args) => c(notM(args[0]), args[1], args[2]); Object.assign(_plugin, { cB, cE, cM, cNotM }); return _plugin; } const namespace = "n"; const prefix = `.${namespace}-`; const elementPrefix = "__"; const modifierPrefix = "--"; const cssr = CssRender(); const plugin = plugin$1({ blockPrefix: prefix, elementPrefix, modifierPrefix }); cssr.use(plugin); const { c: c$1, find } = cssr; const { cB, cE, cM, cNotM } = plugin; function insideModal(style) { return c$1(({ props: { bPrefix } }) => `${bPrefix || prefix}modal, ${bPrefix || prefix}drawer`, [style]); } function insidePopover(style) { return c$1(({ props: { bPrefix } }) => `${bPrefix || prefix}popover`, [style]); } function asModal(style) { return c$1(({ props: { bPrefix } }) => `&${bPrefix || prefix}modal`, style); } const cCB = (...args) => { return c$1(">", [cB(...args)]); }; function createKey(prefix2, suffix) { return prefix2 + (suffix === "default" ? "" : suffix.replace(/^[a-z]/, startChar => startChar.toUpperCase())); } let _isJsdom; function isJsdom() { if (_isJsdom === void 0) { _isJsdom = navigator.userAgent.includes("Node.js") || navigator.userAgent.includes("jsdom"); } return _isJsdom; } const isBrowser$2 = typeof document !== "undefined" && typeof window !== "undefined"; const eventSet = /* @__PURE__ */new WeakSet(); function markEventEffectPerformed(event) { eventSet.add(event); } function eventEffectNotPerformed(event) { return !eventSet.has(event); } function useInjectionInstanceCollection(injectionName, collectionKey, registerKeyRef) { const injection = vue.inject(injectionName, null); if (injection === null) return; const vm = vue.getCurrentInstance()?.proxy; vue.watch(registerKeyRef, registerInstance); registerInstance(registerKeyRef.value); vue.onBeforeUnmount(() => { registerInstance(void 0, registerKeyRef.value); }); function registerInstance(key, oldKey) { if (!injection) return; const collection = injection[collectionKey]; if (oldKey !== void 0) removeInstance(collection, oldKey); if (key !== void 0) addInstance(collection, key); } function removeInstance(collection, key) { if (!collection[key]) collection[key] = []; collection[key].splice(collection[key].findIndex(instance => instance === vm), 1); } function addInstance(collection, key) { if (!collection[key]) collection[key] = []; if (!~collection[key].findIndex(instance => instance === vm)) { collection[key].push(vm); } } } function useInjectionCollection(injectionName, collectionKey, valueRef) { const injection = vue.inject(injectionName, null); if (injection === null) return; if (!(collectionKey in injection)) { injection[collectionKey] = []; } injection[collectionKey].push(valueRef.value); vue.watch(valueRef, (value, prevValue) => { const collectionArray = injection[collectionKey]; const index = collectionArray.findIndex(collectionValue => collectionValue === prevValue); if (~index) collectionArray.splice(index, 1); collectionArray.push(value); }); vue.onBeforeUnmount(() => { const collectionArray = injection[collectionKey]; const index = collectionArray.findIndex(collectionValue => collectionValue === valueRef.value); if (~index) collectionArray.splice(index, 1); }); } function useInjectionElementCollection(injectionName, collectionKey, getElement) { const injection = vue.inject(injectionName, null); if (injection === null) return; if (!(collectionKey in injection)) { injection[collectionKey] = []; } vue.onMounted(() => { const el = getElement(); if (!el) return; injection[collectionKey].push(el); }); vue.onBeforeUnmount(() => { const collectionArray = injection[collectionKey]; const element = getElement(); const index = collectionArray.findIndex(collectionElement => collectionElement === element); if (~index) collectionArray.splice(index, 1); }); } function useDeferredTrue(valueRef, delay, shouldDelayRef) { const delayedRef = vue.ref(valueRef.value); let timerId = null; vue.watch(valueRef, value => { if (timerId !== null) window.clearTimeout(timerId); if (value === true) { if (shouldDelayRef && !shouldDelayRef.value) { delayedRef.value = true; } else { timerId = window.setTimeout(() => { delayedRef.value = true; }, delay); } } else { delayedRef.value = false; } }); return delayedRef; } function useFalseUntilTruthy(originalRef) { const currentRef = vue.ref(!!originalRef.value); if (currentRef.value) return vue.readonly(currentRef); const stop = vue.watch(originalRef, value => { if (value) { currentRef.value = true; stop(); } }); return vue.readonly(currentRef); } function useMemo(getterOrOptions) { const computedValueRef = vue.computed(getterOrOptions); // Maybe it's not possible to lazy evaluate the value, since we can't m