misp-ui-library-test 0.0.1

package/src/packages/image/src/main.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="ui-image">
+    <slot v-if="loading" name="placeholder">
+      <div class="ui-image__placeholder"></div>
+    </slot>
+    <slot v-else-if="error" name="error">
+      <div class="ui-image__error">{{ errorText }}</div>
+    </slot>
+    <img
+      v-else
+      class="ui-image__inner"
+      v-bind="$attrs"
+      v-on="$listeners"
+      @click="clickHandler"
+      :src="src"
+      :style="imageStyle"
+      :class="{ 'ui-image__inner--center': alignCenter }">
+  </div>
+</template>
+
+<script>
+// 简单的节流函数
+function throttle(delay, fn) {
+  let lastTime = 0;
+  return function() {
+    const now = Date.now();
+    if (now - lastTime >= delay) {
+      lastTime = now;
+      fn.apply(this, arguments);
+    }
+  };
+}
+
+const isSupportObjectFit = () => document.documentElement.style.objectFit !== undefined;
+
+const ObjectFit = {
+  NONE: 'none',
+  CONTAIN: 'contain',
+  COVER: 'cover',
+  FILL: 'fill',
+  SCALE_DOWN: 'scale-down'
+};
+
+export default {
+  name: 'UiImage',
+
+  inheritAttrs: false,
+
+  props: {
+    src: String,
+    fit: String,
+    lazy: Boolean,
+    scrollContainer: {},
+    errorText: {
+      type: String,
+      default: '加载失败'
+    }
+  },
+
+  data() {
+    return {
+      loading: true,
+      error: false,
+      show: !this.lazy,
+      imageWidth: 0,
+      imageHeight: 0
+    };
+  },
+
+  computed: {
+    imageStyle() {
+      const { fit } = this;
+      if (fit) {
+        return isSupportObjectFit()
+          ? { 'object-fit': fit }
+          : this.getImageStyle(fit);
+      }
+      return {};
+    },
+    alignCenter() {
+      return !isSupportObjectFit() && this.fit !== ObjectFit.FILL;
+    }
+  },
+
+  watch: {
+    src(val) {
+      this.show && this.loadImage();
+    },
+    show(val) {
+      val && this.loadImage();
+    }
+  },
+
+  mounted() {
+    if (this.lazy) {
+      this.addLazyLoadListener();
+    } else {
+      this.loadImage();
+    }
+  },
+
+  beforeDestroy() {
+    this.lazy && this.removeLazyLoadListener();
+  },
+
+  methods: {
+    loadImage() {
+      this.loading = true;
+      this.error = false;
+
+      const img = new Image();
+      img.onload = e => this.handleLoad(e, img);
+      img.onerror = this.handleError.bind(this);
+
+      Object.keys(this.$attrs)
+        .forEach((key) => {
+          const value = this.$attrs[key];
+          img.setAttribute(key, value);
+        });
+      img.src = this.src;
+    },
+    handleLoad(e, img) {
+      this.imageWidth = img.width;
+      this.imageHeight = img.height;
+      this.loading = false;
+      this.error = false;
+    },
+    handleError(e) {
+      this.loading = false;
+      this.error = true;
+      this.$emit('error', e);
+    },
+    handleLazyLoad() {
+      if (this.isInContainer(this.$el, this._scrollContainer)) {
+        this.show = true;
+        this.removeLazyLoadListener();
+      }
+    },
+    addLazyLoadListener() {
+      const { scrollContainer } = this;
+      let _scrollContainer = null;
+
+      if (scrollContainer instanceof HTMLElement) {
+        _scrollContainer = scrollContainer;
+      } else if (typeof scrollContainer === 'string') {
+        _scrollContainer = document.querySelector(scrollContainer);
+      } else {
+        _scrollContainer = this.getScrollContainer(this.$el);
+      }
+
+      if (_scrollContainer) {
+        this._scrollContainer = _scrollContainer;
+        this._lazyLoadHandler = throttle(200, this.handleLazyLoad);
+        _scrollContainer.addEventListener('scroll', this._lazyLoadHandler);
+        this.handleLazyLoad();
+      }
+    },
+    removeLazyLoadListener() {
+      const { _scrollContainer, _lazyLoadHandler } = this;
+
+      if (!_scrollContainer || !_lazyLoadHandler) return;
+
+      _scrollContainer.removeEventListener('scroll', _lazyLoadHandler);
+      this._scrollContainer = null;
+      this._lazyLoadHandler = null;
+    },
+    getImageStyle(fit) {
+      const { imageWidth, imageHeight } = this;
+      const {
+        clientWidth: containerWidth,
+        clientHeight: containerHeight
+      } = this.$el;
+
+      if (!imageWidth || !imageHeight || !containerWidth || !containerHeight) return {};
+
+      const imageAspectRatio = imageWidth / imageHeight;
+      const containerAspectRatio = containerWidth / containerHeight;
+
+      if (fit === ObjectFit.SCALE_DOWN) {
+        const isSmaller = imageWidth < containerWidth && imageHeight < containerHeight;
+        fit = isSmaller ? ObjectFit.NONE : ObjectFit.CONTAIN;
+      }
+
+      switch (fit) {
+        case ObjectFit.NONE:
+          return { width: 'auto', height: 'auto' };
+        case ObjectFit.CONTAIN:
+          return (imageAspectRatio < containerAspectRatio) ? { width: 'auto' } : { height: 'auto' };
+        case ObjectFit.COVER:
+          return (imageAspectRatio < containerAspectRatio) ? { height: 'auto' } : { width: 'auto' };
+        default:
+          return {};
+      }
+    },
+    clickHandler() {
+      this.$emit('click', arguments[0]);
+    },
+    isInContainer(el, container) {
+      if (!container) return true;
+
+      const elRect = el.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+
+      return elRect.top < containerRect.bottom &&
+        elRect.bottom > containerRect.top &&
+        elRect.left < containerRect.right &&
+        elRect.right > containerRect.left;
+    },
+    getScrollContainer(el) {
+      let parent = el;
+      while (parent) {
+        if (parent === document || parent === document.body) return document;
+
+        const overflowY = getComputedStyle(parent).overflowY;
+        if (overflowY === 'auto' || overflowY === 'scroll') {
+          return parent;
+        }
+        parent = parent.parentElement;
+      }
+      return document;
+    }
+  }
+};
+</script>

package/src/packages/input/index.js

@@ -0,0 +1,13 @@
+/**
+ * Input 组件
+ * 提供基础输入洪功能，支持字符串、数字、长度限制
+ */
+
+import UiInput from './src/main.vue'
+
+// 自动安装
+UiInput.install = function(Vue) {
+  Vue.component(UiInput.name, UiInput)
+}
+
+export default UiInput

package/src/packages/input/src/calcTextareaHeight.js

@@ -0,0 +1,123 @@
+/**
+ * @file calcTextareaHeight.js
+ * @description 计算多行文本域（textarea）的自适应高度
+ * @note 通过创建隐藏的 textarea 元素来测量内容高度，支持最小/最大行数限制
+ */
+
+/**
+ * @type {HTMLTextAreaElement|null}
+ * @description 用于高度计算的隐藏 textarea 元素（单例模式）
+ */
+let hiddenTextarea
+
+/**
+ * @type {string}
+ * @description 隐藏 textarea 的 CSS 样式，确保元素不可见且不影响布局
+ */
+const HIDDEN_STYLE = `
+  height:0 !important;
+  visibility:hidden !important;
+  overflow:hidden !important;
+  position:absolute !important;
+  z-index:-1000 !important;
+  top:0 !important;
+  right:0 !important
+`
+
+/**
+ * @type {string[]}
+ * @description 需要从目标元素复制的样式属性列表，确保隐藏 textarea 与目标元素样式一致
+ */
+const CONTEXT_STYLE = [
+  'letter-spacing',
+  'line-height',
+  'padding-top',
+  'padding-bottom',
+  'font-family',
+  'font-weight',
+  'font-size',
+  'text-rendering',
+  'text-transform',
+  'width',
+  'text-indent',
+  'padding-left',
+  'padding-right',
+  'border-width',
+  'box-sizing',
+]
+
+/**
+ * @description 计算目标元素的样式信息，用于隐藏 textarea 的样式复制
+ * @param {HTMLElement} targetElement - 目标 textarea 元素
+ * @returns {Object} 样式计算结果
+ * @returns {string} return.contextStyle - 可复制的 CSS 样式字符串
+ * @returns {number} return.paddingSize - 上下 padding 的总和
+ * @returns {number} return.borderSize - 上下 border 的总和
+ * @returns {string} return.boxSizing - box-sizing 属性值（border-box 或 content-box）
+ */
+function calculateNodeStyling(targetElement) {
+  const style = window.getComputedStyle(targetElement)
+
+  const boxSizing = style.getPropertyValue('box-sizing')
+
+  const paddingSize = parseFloat(style.getPropertyValue('padding-bottom')) + parseFloat(style.getPropertyValue('padding-top'))
+
+  const borderSize = parseFloat(style.getPropertyValue('border-bottom-width')) + parseFloat(style.getPropertyValue('border-top-width'))
+
+  const contextStyle = CONTEXT_STYLE.map((name) => `${name}:${style.getPropertyValue(name)}`).join(';')
+
+  return { contextStyle, paddingSize, borderSize, boxSizing }
+}
+
+/**
+ * @description 计算 textarea 的自适应高度
+ * @param {HTMLTextAreaElement} targetElement - 目标 textarea 元素
+ * @param {number} [minRows=1] - 最小行数，默认值为 1
+ * @param {number|null} [maxRows=null] - 最大行数，null 表示不限制
+ * @returns {Object} 高度计算结果
+ * @returns {string} return.height - 计算后的实际高度（带 px 单位）
+ * @returns {string} [return.minHeight] - 最小高度（当 minRows 不为 null 时返回，带 px 单位）
+ */
+export default function calcTextareaHeight(targetElement, minRows = 1, maxRows = null) {
+  if (!hiddenTextarea) {
+    hiddenTextarea = document.createElement('textarea')
+    document.body.appendChild(hiddenTextarea)
+  }
+
+  let { paddingSize, borderSize, boxSizing, contextStyle } = calculateNodeStyling(targetElement)
+
+  hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`)
+  hiddenTextarea.value = targetElement.value || targetElement.placeholder || ''
+
+  let height = hiddenTextarea.scrollHeight
+  const result = {}
+
+  if (boxSizing === 'border-box') {
+    height = height + borderSize
+  } else if (boxSizing === 'content-box') {
+    height = height - paddingSize
+  }
+
+  hiddenTextarea.value = ''
+  let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize
+
+  if (minRows !== null) {
+    let minHeight = singleRowHeight * minRows
+    if (boxSizing === 'border-box') {
+      minHeight = minHeight + paddingSize + borderSize
+    }
+    height = Math.max(minHeight, height)
+    result.minHeight = `${minHeight}px`
+  }
+  if (maxRows !== null) {
+    let maxHeight = singleRowHeight * maxRows
+    if (boxSizing === 'border-box') {
+      maxHeight = maxHeight + paddingSize + borderSize
+    }
+    height = Math.min(maxHeight, height)
+  }
+  result.height = `${height}px`
+  hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea)
+  hiddenTextarea = null
+  return result
+}