misp-ui-library-test 0.0.1

package/src/utils/color.js

@@ -0,0 +1,76 @@
+import { getCssVar } from './dom/index.js'
+
+/**
+ * 添加颜色透明度, 并将十六进制色值转为 rgba 色值
+ * @param {String} colorName 颜色名称(基于MISP色卡, 如primary-blue) | 色值（#/rgb(a)）
+ * @param {Number | String} [opacity] 透明度
+ * @returns {String} rgba 透明度色值
+ */
+export function colorOpacityTrans(colorName, opacity = 1) {
+  // 从色卡中获取颜色色值
+  let colorStr = (typeof document !== 'undefined') ? getCssVar(document.documentElement, colorName) : ''
+  // 若颜色不存在色卡中, 直接使用原色值
+  if (!colorStr) colorStr = colorName
+
+  // 标准化 opacity
+  let opacityValue = parseFloat(opacity)
+  if (isNaN(opacityValue)) opacityValue = 1
+  opacityValue = Math.max(0, Math.min(1, opacityValue))
+
+  if (colorStr.startsWith('#')) {
+    return hexColorRender(colorStr, opacityValue);
+  } else if (colorStr.startsWith('rgb')) {
+    return rgbColorRender(colorStr, opacityValue);
+  } else {
+    // 不支持色彩空间转换, 非法色值, 直接返回原色值
+    return colorName
+  }
+}
+
+/**
+ * 处理十六进制颜色值并添加透明度
+ * @param {String} colorStr 十六进制颜色值
+ * @param {Number} opacity 透明度 (0-1)
+ * @returns {String} rgba 透明度色值
+ */
+export function hexColorRender(colorStr, opacity) {
+  const hex = colorStr.replace(/^#/, '');
+  // 严格匹配合法的 3 位或 6 位十六进制颜色值
+  if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$/.test(hex)) return colorStr;
+
+  let hexGroups = [];
+  if (hex.length === 3) {
+    // 处理简写形式 #rgb -> #rrggbb
+    hexGroups = Array.from(hex).map(c => c + c);
+  } else if (hex.length === 6) {
+    hexGroups = hex.match(/.{2}/g); // 拆分 rgb, 每两个字符一组
+  } else {
+    return colorStr; // 长度既不是3也不是6，非法
+  }
+
+  const rgbValues = hexGroups.map(str => {
+    const num = parseInt(str, 16);
+    return isNaN(num) ? 0 : num;
+  });
+  return `rgba(${rgbValues.join(', ')}, ${opacity})`;
+}
+
+/**
+ * 处理 RGB 颜色值并添加透明度
+ * @param {String} colorStr RGB颜色值
+ * @param {Number} opacity 透明度 (0-1)
+ * @returns {String} rgba 透明度色值
+ */
+export function rgbColorRender(colorStr, opacity) {
+  const match = colorStr.match(/^rgba?\(([^)]+)\)/)
+  if (!match) return colorStr
+
+  const values = match[1].split(',').map(v => v.trim())
+  if (values.length < 3) return colorStr // 非法 rgb 色值
+  
+  const rgbValues = values.slice(0, 3).map(v => {
+    const num = parseInt(v, 10)
+    return isNaN(num) ? 0 : num
+  })
+  return `rgba(${rgbValues.join(', ')}, ${opacity})`
+}

package/src/utils/dom/index.js

@@ -0,0 +1,421 @@
+/**
+ * @fileoverview Vue2 UI Library - DOM 工具模块
+ * @description 提供 DOM 元素操作、事件绑定、样式处理、滚动检测等常用工具函数
+ * @module utils/dom
+ */
+
+import Vue from 'vue';
+
+const isServer = Vue.prototype.$isServer;
+const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
+const MOZ_HACK_REGEXP = /^moz([A-Z])/;
+const ieVersion = isServer ? 0 : Number(document.documentMode);
+
+/**
+ * 去除字符串首尾空白字符
+ * @function trim
+ * @description 移除字符串开头和结尾的空格、换行符及 BOM 标记
+ * @param {String} string - 要处理的字符串
+ * @returns {String} 去除首尾空白后的字符串
+ */
+const trim = function(string) {
+  return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
+};
+
+/**
+ * 将连字符分隔的字符串转换为驼峰命名
+ * @function camelCase
+ * @description 处理连字符、下划线分隔的字符串，同时兼容 Mozilla 前缀转换
+ * @param {String} name - 要转换的字符串（如 kebab-case 格式）
+ * @returns {String} 驼峰命名格式的字符串
+ */
+const camelCase = function(name) {
+  return name.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
+    return offset ? letter.toUpperCase() : letter;
+  }).replace(MOZ_HACK_REGEXP, 'Moz$1');
+};
+
+/**
+ * 绑定事件监听器
+ * @function on
+ * @memberof module:utils/dom
+ * @param {HTMLElement} element - 目标元素
+ * @param {String} event - 事件名称
+ * @param {Function} handler - 事件处理函数
+ * @description 兼容 IE8+ 和现代浏览器的事件绑定
+ * @returns {void}
+ */
+export const on = (function() {
+  if (!isServer && document.addEventListener) {
+    return function(element, event, handler) {
+      if (element && event && handler) {
+        element.addEventListener(event, handler, false);
+      }
+    };
+  } else {
+    return function(element, event, handler) {
+      if (element && event && handler) {
+        element.attachEvent('on' + event, handler);
+      }
+    };
+  }
+})();
+
+/**
+ * 移除事件监听器
+ * @function off
+ * @memberof module:utils/dom
+ * @param {HTMLElement} element - 目标元素
+ * @param {String} event - 事件名称
+ * @param {Function} handler - 事件处理函数
+ * @description 兼容 IE8+ 和现代浏览器的事件解绑
+ * @returns {void}
+ */
+export const off = (function() {
+  if (!isServer && document.removeEventListener) {
+    return function(element, event, handler) {
+      if (element && event) {
+        element.removeEventListener(event, handler, false);
+      }
+    };
+  } else {
+    return function(element, event, handler) {
+      if (element && event) {
+        element.detachEvent('on' + event, handler);
+      }
+    };
+  }
+})();
+
+/**
+ * 绑定一次性事件监听器
+ * @function once
+ * @memberof module:utils/dom
+ * @param {HTMLElement} el - 目标元素
+ * @param {String} event - 事件名称
+ * @param {Function} fn - 事件处理函数
+ * @description 事件触发后自动移除监听器
+ * @returns {void}
+ */
+export const once = function(el, event, fn) {
+  var listener = function() {
+    if (fn) {
+      fn.apply(this, arguments);
+    }
+    off(el, event, listener);
+  };
+  on(el, event, listener);
+};
+
+/**
+ * 检查元素是否包含指定类名
+ * @function hasClass
+ * @memberof module:utils/dom
+ * @param {HTMLElement} el - 目标元素
+ * @param {String} cls - 类名
+ * @returns {Boolean} 是否包含该类名
+ * @throws {Error} 当类名包含空格时抛出错误
+ */
+export function hasClass(el, cls) {
+  if (!el || !cls) return false;
+  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
+  if (el.classList) {
+    return el.classList.contains(cls);
+  } else {
+    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
+  }
+};
+
+/**
+ * 为元素添加类名
+ * @function addClass
+ * @memberof module:utils/dom
+ * @param {HTMLElement} el - 目标元素
+ * @param {String} cls - 要添加的类名（支持多个类名，空格分隔）
+ * @returns {void}
+ */
+export function addClass(el, cls) {
+  if (!el) return;
+  var curClass = el.className;
+  var classes = (cls || '').split(' ');
+
+  for (var i = 0, j = classes.length; i < j; i++) {
+    var clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.add(clsName);
+    } else if (!hasClass(el, clsName)) {
+      curClass += ' ' + clsName;
+    }
+  }
+  if (!el.classList) {
+    el.setAttribute('class', curClass);
+  }
+};
+
+/**
+ * 从元素移除类名
+ * @function removeClass
+ * @memberof module:utils/dom
+ * @param {HTMLElement} el - 目标元素
+ * @param {String} cls - 要移除的类名（支持多个类名，空格分隔）
+ * @returns {void}
+ */
+export function removeClass(el, cls) {
+  if (!el || !cls) return;
+  var classes = cls.split(' ');
+  var curClass = ' ' + el.className + ' ';
+
+  for (var i = 0, j = classes.length; i < j; i++) {
+    var clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.remove(clsName);
+    } else if (hasClass(el, clsName)) {
+      curClass = curClass.replace(' ' + clsName + ' ', ' ');
+    }
+  }
+  if (!el.classList) {
+    el.setAttribute('class', trim(curClass));
+  }
+};
+
+/**
+ * 获取元素的计算样式
+ * @function getStyle
+ * @memberof module:utils/dom
+ * @param {HTMLElement} element - 目标元素
+ * @param {String} styleName - 样式属性名
+ * @returns {String|null} 样式值
+ * @description 兼容 IE8+ 和现代浏览器，自动处理样式名前缀
+ */
+export const getStyle = ieVersion < 9 ? function(element, styleName) {
+  if (isServer) return;
+  if (!element || !styleName) return null;
+  styleName = camelCase(styleName);
+  if (styleName === 'float') {
+    styleName = 'styleFloat';
+  }
+  try {
+    switch (styleName) {
+      case 'opacity':
+        try {
+          return element.filters.item('alpha').opacity / 100;
+        } catch (e) {
+          return 1.0;
+        }
+      default:
+        return (element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null);
+    }
+  } catch (e) {
+    return element.style[styleName];
+  }
+} : function(element, styleName) {
+  if (isServer) return;
+  if (!element || !styleName) return null;
+  styleName = camelCase(styleName);
+  if (styleName === 'float') {
+    styleName = 'cssFloat';
+  }
+  try {
+    var computed = document.defaultView.getComputedStyle(element, '');
+    return element.style[styleName] || computed ? computed[styleName] : null;
+  } catch (e) {
+    return element.style[styleName];
+  }
+};
+
+/**
+ * 设置元素的样式
+ * @function setStyle
+ * @memberof module:utils/dom
+ * @param {HTMLElement} element - 目标元素
+ * @param {String|Object} styleName - 样式属性名或样式对象
+ * @param {*} [value] - 样式值（当 styleName 为字符串时需要）
+ * @returns {void}
+ * @description 支持批量设置样式（传入对象）或单个设置（传入字符串 + 值）
+ */
+export function setStyle(element, styleName, value) {
+  if (!element || !styleName) return;
+
+  if (typeof styleName === 'object') {
+    for (var prop in styleName) {
+      if (styleName.hasOwnProperty(prop)) {
+        setStyle(element, prop, styleName[prop]);
+      }
+    }
+  } else {
+    styleName = camelCase(styleName);
+    if (styleName === 'opacity' && ieVersion < 9) {
+      element.style.filter = isNaN(value) ? '' : 'alpha(opacity=' + value * 100 + ')';
+    } else {
+      element.style[styleName] = value;
+    }
+  }
+};
+
+/**
+ * 获取 CSS 自定义属性（变量）的值
+ * @param {HTMLElement} element - 目标元素
+ * @param {String} varName - 变量名 (不带 -- 前缀)
+ * @returns {String}
+ */
+export function getCssVar(element, varName) {
+  if (isServer) return '';
+  if (!element || !varName) return '';
+  return getComputedStyle(element).getPropertyValue(`--${varName}`).trim();
+}
+
+/**
+ * 检查元素是否可滚动
+ * @function isScroll
+ * @memberof module:utils/dom
+ * @param {HTMLElement} el - 目标元素
+ * @param {Boolean|null} vertical - 是否检查垂直方向
+ * @returns {RegExpMatchArray|null} 匹配结果
+ * @description 检查元素的 overflow 属性是否允许滚动
+ */
+export const isScroll = (el, vertical) => {
+  if (isServer) return;
+
+  const determinedDirection = vertical !== null && vertical !== undefined;
+  const overflow = determinedDirection
+    ? vertical
+      ? getStyle(el, 'overflow-y')
+      : getStyle(el, 'overflow-x')
+    : getStyle(el, 'overflow');
+
+  return overflow.match(/(scroll|auto|overlay)/);
+};
+
+/**
+ * 获取滚动容器
+ * @function getScrollContainer
+ * @memberof module:utils/dom
+ * @param {HTMLElement} el - 目标元素
+ * @param {Boolean|null} vertical - 是否检查垂直方向
+ * @returns {HTMLElement|Window} 滚动容器元素或 window
+ * @description 向上查找最近的可滚动父元素
+ */
+export const getScrollContainer = (el, vertical) => {
+  if (isServer) return;
+
+  let parent = el;
+  while (parent) {
+    if ([window, document, document.documentElement].includes(parent)) {
+      return window;
+    }
+    if (isScroll(parent, vertical)) {
+      return parent;
+    }
+    parent = parent.parentNode;
+  }
+
+  return parent;
+};
+
+/**
+ * 检查元素是否在容器内可见
+ * @function isInContainer
+ * @memberof module:utils/dom
+ * @param {HTMLElement} el - 目标元素
+ * @param {HTMLElement|Window} container - 容器元素
+ * @returns {Boolean} 是否可见
+ * @description 通过边界矩形检测元素是否与容器有重叠区域
+ */
+export const isInContainer = (el, container) => {
+  if (isServer || !el || !container) return false;
+
+  const elRect = el.getBoundingClientRect();
+  let containerRect;
+
+  if ([window, document, document.documentElement, null, undefined].includes(container)) {
+    containerRect = {
+      top: 0,
+      right: window.innerWidth,
+      bottom: window.innerHeight,
+      left: 0
+    };
+  } else {
+    containerRect = container.getBoundingClientRect();
+  }
+
+  return elRect.top < containerRect.bottom &&
+    elRect.bottom > containerRect.top &&
+    elRect.right > containerRect.left &&
+    elRect.left < containerRect.right;
+};
+
+/**
+ * 将指定元素滚动到容器可视区域内
+ * @function scrollIntoView
+ * @memberof module:utils/dom
+ * @param {HTMLElement} container - 滚动容器元素
+ * @param {HTMLElement} [selected] - 需要滚动到的目标元素
+ * @returns {void}
+ * @description 
+ * - 如果未提供目标元素，则将容器滚动到顶部。
+ * - 如果目标元素在可视区域上方，则滚动使其顶部对齐容器顶部。
+ * - 如果目标元素在可视区域下方，则滚动使其底部对齐容器底部。
+ * - 自动处理 offsetParent 链以计算准确的偏移量。
+ */
+export function scrollIntoView(container, selected) {
+  if (Vue.prototype.$isServer) return;
+
+  if (!selected) {
+    container.scrollTop = 0;
+    return;
+  }
+
+  const offsetParents = [];
+  let pointer = selected.offsetParent;
+  while (pointer && container !== pointer && container.contains(pointer)) {
+    offsetParents.push(pointer);
+    pointer = pointer.offsetParent;
+  }
+  const top = selected.offsetTop + offsetParents.reduce((prev, curr) => (prev + curr.offsetTop), 0);
+  const bottom = top + selected.offsetHeight;
+  const viewRectTop = container.scrollTop;
+  const viewRectBottom = viewRectTop + container.clientHeight;
+
+  if (top < viewRectTop) {
+    container.scrollTop = top;
+  } else if (bottom > viewRectBottom) {
+    container.scrollTop = bottom - container.clientHeight;
+  }
+}
+
+/**
+ * 获取一段文本在给定字体大小下的宽度
+ * @param {string} text - 要测量的文本内容
+ * @param {string} font - CSS 字体字符串 (例如: '14px Arial', 'bold 12px sans-serif')
+ * @returns {number} 文本的像素宽度
+ */
+export function getTextWidth(text, font) {
+  if (isServer) return 0;
+  if (!text) return 0;
+
+  // 创建临时元素
+  const span = document.createElement('span');
+  
+  // 设置样式以确保测量准确
+  // white-space: nowrap 防止换行
+  // visibility: hidden 确保不可见
+  // position: absolute 确保不占据文档流空间
+  span.style.position = 'absolute';
+  span.style.visibility = 'hidden';
+  span.style.whiteSpace = 'nowrap';
+  span.style.font = font || getStyle(document.body, 'font'); // 如果未提供 font，使用 body 的默认字体
+  // 设置文本内容
+  span.textContent = text;
+  // 添加到 DOM 中以便计算
+  document.body.appendChild(span);
+  // 获取宽度
+  const width = span.offsetWidth;
+  // 移除临时元素
+  document.body.removeChild(span);
+  
+  return width;
+}

package/src/utils/dom/scrollbar-width.js

@@ -0,0 +1,49 @@
+/**
+ * @fileoverview Vue2 UI Library - 滚动条宽度计算工具
+ * @description 动态计算浏览器滚动条的宽度，用于处理弹出层、滚动容器等场景的布局问题
+ * @module utils/dom/scrollbar-width
+ */
+
+import Vue from 'vue';
+
+/**
+ * 滚动条宽度缓存值
+ * @type {Number|undefined}
+ */
+let scrollBarWidth;
+
+/**
+ * 计算浏览器滚动条宽度
+ * @function getScrollBarWidth
+ * @memberof module:utils/dom/scrollbar-width
+ * @returns {Number} 滚动条宽度（像素），服务端渲染时返回 0
+ * @description 通过创建临时 DOM 元素测量滚动条占用宽度，结果会被缓存以提高性能
+ * @example
+ * const width = getScrollBarWidth();
+ * console.log(width); // 输出：15（不同浏览器可能不同）
+ */
+export default function () {
+  if (Vue.prototype.$isServer) return 0;
+  if (scrollBarWidth !== undefined) return scrollBarWidth;
+
+  const outer = document.createElement('div');
+  outer.className = 'el-scrollbar__wrap';
+  outer.style.visibility = 'hidden';
+  outer.style.width = '100px';
+  outer.style.position = 'absolute';
+  outer.style.top = '-9999px';
+  document.body.appendChild(outer);
+
+  const widthNoScroll = outer.offsetWidth;
+  outer.style.overflow = 'scroll';
+
+  const inner = document.createElement('div');
+  inner.style.width = '100%';
+  outer.appendChild(inner);
+
+  const widthWithScroll = inner.offsetWidth;
+  outer.parentNode.removeChild(outer);
+  scrollBarWidth = widthNoScroll - widthWithScroll;
+
+  return scrollBarWidth;
+};