@holyer-lib/ui 0.0.10 → 0.0.11

package/dist/ui.umd.js

@@ -16,7 +16,7 @@
       return css;
   }
 
-  function __$styleInject$1(css) {
+  function __$styleInject$2(css) {
       if (!css) return;
 
       if (typeof window == 'undefined') return;
@@ -28,11 +28,11 @@
       return css;
   }
 
-  __$styleInject$1(".hi-expand-text {\n  display: flex;\n  width: 100%;\n  line-height: 1.5;\n}\n.hi-expand-text--content {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-word;\n  -webkit-line-clamp: var(--hi-expand-text-line-clamp);\n  line-clamp: var(--hi-expand-text-line-clamp);\n}\n.hi-expand-text--content.hi-expand-text--content__show-toggle::before {\n  content: '';\n  float: right;\n  height: 100%;\n  margin-bottom: calc(-1em * 1.5);\n}\n.hi-expand-text--content__expanded {\n  display: block;\n  overflow: visible;\n  -webkit-line-clamp: unset;\n  line-clamp: unset;\n}\n.hi-expand-text--toggle {\n  color: var(--td-brand-color);\n  float: right;\n  clear: both;\n  cursor: pointer;\n}\n");
+  __$styleInject$2(".hi-expand-text {\n  display: flex;\n  width: 100%;\n  line-height: 1.5;\n}\n.hi-expand-text--content {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-word;\n  -webkit-line-clamp: var(--hi-expand-text-line-clamp);\n  line-clamp: var(--hi-expand-text-line-clamp);\n}\n.hi-expand-text--content.hi-expand-text--content__show-toggle::before {\n  content: '';\n  float: right;\n  height: 100%;\n  margin-bottom: calc(-1em * 1.5);\n}\n.hi-expand-text--content__expanded {\n  display: block;\n  overflow: visible;\n  -webkit-line-clamp: unset;\n  line-clamp: unset;\n}\n.hi-expand-text--toggle {\n  color: var(--td-brand-color);\n  float: right;\n  clear: both;\n  cursor: pointer;\n}\n");
 
   //
 
-  var script$1 = {
+  var script$2 = {
     name: 'HiExpandText',
     props: {
       content: {
@@ -170,7 +170,7 @@
     }
   };
 
-  function normalizeComponent$1(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+  function normalizeComponent$2(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
       if (typeof shadowMode !== 'boolean') {
           createInjectorSSR = createInjector;
           createInjector = shadowMode;
@@ -246,10 +246,10 @@
   }
 
   /* script */
-  const __vue_script__$1 = script$1;
+  const __vue_script__$2 = script$2;
 
   /* template */
-  var __vue_render__$1 = function () {
+  var __vue_render__$2 = function () {
     var _vm = this;
     var _h = _vm.$createElement;
     var _c = _vm._self._c || _h;
@@ -289,17 +289,17 @@
       ]
     )
   };
-  var __vue_staticRenderFns__$1 = [];
-  __vue_render__$1._withStripped = true;
+  var __vue_staticRenderFns__$2 = [];
+  __vue_render__$2._withStripped = true;
 
     /* style */
-    const __vue_inject_styles__$1 = undefined;
+    const __vue_inject_styles__$2 = undefined;
     /* scoped */
-    const __vue_scope_id__$1 = undefined;
+    const __vue_scope_id__$2 = undefined;
     /* module identifier */
-    const __vue_module_identifier__$1 = undefined;
+    const __vue_module_identifier__$2 = undefined;
     /* functional template */
-    const __vue_is_functional_template__$1 = false;
+    const __vue_is_functional_template__$2 = false;
     /* style inject */
     
     /* style inject SSR */
@@ -308,27 +308,27 @@
     
 
     
-    const __vue_component__$1 = /*#__PURE__*/normalizeComponent$1(
-      { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
-      __vue_inject_styles__$1,
-      __vue_script__$1,
-      __vue_scope_id__$1,
-      __vue_is_functional_template__$1,
-      __vue_module_identifier__$1,
+    const __vue_component__$2 = /*#__PURE__*/normalizeComponent$2(
+      { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
+      __vue_inject_styles__$2,
+      __vue_script__$2,
+      __vue_scope_id__$2,
+      __vue_is_functional_template__$2,
+      __vue_module_identifier__$2,
       false,
       undefined,
       undefined,
       undefined
     );
 
-  __vue_component__$1.name = 'HiExpandText';
+  __vue_component__$2.name = 'HiExpandText';
 
   // 添加 install
-  __vue_component__$1.install = Vue => {
-    Vue.component(__vue_component__$1.name, __vue_component__$1);
+  __vue_component__$2.install = Vue => {
+    Vue.component(__vue_component__$2.name, __vue_component__$2);
   };
 
-  function __$styleInject(css) {
+  function __$styleInject$1(css) {
       if (!css) return;
 
       if (typeof window == 'undefined') return;
@@ -340,7 +340,7 @@
       return css;
   }
 
-  __$styleInject(".hi-title {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.hi-title--small {\n  gap: 2px;\n}\n.hi-title--large {\n  gap: 6px;\n}\n.hi-title__header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.hi-title__prefix {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n}\n.hi-title__bar {\n  width: 4px;\n  background-color: var(--td-brand-color);\n  flex-shrink: 0;\n}\n.hi-title__icon {\n  flex-shrink: 0;\n  line-height: 1;\n}\n.hi-title__text {\n  margin: 0;\n  font-weight: 600;\n  color: var(--td-text-color-primary);\n}\n.hi-title__description {\n  margin: 0;\n  font-size: 12px;\n  color: var(--td-text-color-secondary);\n}\n");
+  __$styleInject$1(".hi-title {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.hi-title--small {\n  gap: 2px;\n}\n.hi-title--large {\n  gap: 6px;\n}\n.hi-title__header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.hi-title__prefix {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n}\n.hi-title__bar {\n  width: 4px;\n  background-color: var(--td-brand-color);\n  flex-shrink: 0;\n}\n.hi-title__icon {\n  flex-shrink: 0;\n  line-height: 1;\n}\n.hi-title__text {\n  margin: 0;\n  font-weight: 600;\n  color: var(--td-text-color-primary);\n}\n.hi-title__description {\n  margin: 0;\n  font-size: 12px;\n  color: var(--td-text-color-secondary);\n}\n");
 
   //
   const TITILE_SIZE_MAP = {
@@ -348,7 +348,7 @@
     medium: '16px',
     large: '18px'
   };
-  var script = {
+  var script$1 = {
     name: 'HiTitle',
     inheritAttrs: false,
     props: {
@@ -427,7 +427,7 @@
     }
   };
 
-  function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+  function normalizeComponent$1(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
       if (typeof shadowMode !== 'boolean') {
           createInjectorSSR = createInjector;
           createInjector = shadowMode;
@@ -503,10 +503,10 @@
   }
 
   /* script */
-  const __vue_script__ = script;
+  const __vue_script__$1 = script$1;
 
   /* template */
-  var __vue_render__ = function () {
+  var __vue_render__$1 = function () {
     var _vm = this;
     var _h = _vm.$createElement;
     var _c = _vm._self._c || _h;
@@ -572,6 +572,435 @@
       ]
     )
   };
+  var __vue_staticRenderFns__$1 = [];
+  __vue_render__$1._withStripped = true;
+
+    /* style */
+    const __vue_inject_styles__$1 = undefined;
+    /* scoped */
+    const __vue_scope_id__$1 = undefined;
+    /* module identifier */
+    const __vue_module_identifier__$1 = undefined;
+    /* functional template */
+    const __vue_is_functional_template__$1 = false;
+    /* style inject */
+    
+    /* style inject SSR */
+    
+    /* style inject shadow dom */
+    
+
+    
+    const __vue_component__$1 = /*#__PURE__*/normalizeComponent$1(
+      { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
+      __vue_inject_styles__$1,
+      __vue_script__$1,
+      __vue_scope_id__$1,
+      __vue_is_functional_template__$1,
+      __vue_module_identifier__$1,
+      false,
+      undefined,
+      undefined,
+      undefined
+    );
+
+  // 显式设置 name（避免 .vue 丢失）
+  __vue_component__$1.name = 'HiTitle';
+
+  // 添加 install
+  __vue_component__$1.install = Vue => {
+    Vue.component(__vue_component__$1.name, __vue_component__$1);
+  };
+
+  function __$styleInject(css) {
+      if (!css) return;
+
+      if (typeof window == 'undefined') return;
+      var style = document.createElement('style');
+      style.setAttribute('media', 'screen');
+
+      style.innerHTML = css;
+      document.head.appendChild(style);
+      return css;
+  }
+
+  __$styleInject(".hi-virtual-list {\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: relative;\n  will-change: scroll-position;\n}\n.hi-virtual-list--placeholder {\n  pointer-events: none;\n}\n.hi-virtual-list--item-wrapper {\n  box-sizing: border-box;\n}\n");
+
+  /**
+   * 类型判断工具
+   */
+
+  /**
+   * 将数值或字符串转换为合法的 CSS 长度值（用于 style 绑定）
+   * - 若为 number，自动追加 'px' 单位
+   * - 若为 string，原样返回（假定用户已提供合法 CSS 长度值）
+   * @param {number|string} value - 输入值（如 100, '100%', '50vh', 'auto'）
+   * @returns {string} 合法的 CSS 长度字符串 默认值为 0
+   * @example
+   * formatSize(100)        // '100px'
+   * formatSize('100%')     // '100%'
+   * formatSize('50vh')     // '50vh'
+   * formatSize(null)       // 0
+   * formatSize(undefined)  // 0
+   */
+  function formatSize(value) {
+    if (typeof value === 'number') {
+      return `${value}px`;
+    }
+    if (typeof value === 'string') {
+      if (value.trim() === '') {
+        return 0;
+      }
+      return value;
+    }
+    return 0;
+  }
+
+  //
+
+  var script = {
+    name: 'HiVirtualList',
+    props: {
+      items: {
+        type: Array,
+        required: true,
+        default: () => []
+      },
+      itemHeight: {
+        type: Number,
+        required: true,
+        validator(value) {
+          if (value <= 0) {
+            // eslint-disable-next-line no-console
+            console.error('[HiVirtualList] itemHeight must be a positive number.');
+            return false;
+          }
+          return true;
+        }
+      },
+      height: {
+        type: [Number, String],
+        required: true
+      },
+      buffer: {
+        type: Number,
+        default: 50
+      },
+      nodeKey: {
+        type: String,
+        default: undefined
+      }
+    },
+    data() {
+      return {
+        scrollTop: 0,
+        clientHeight: 0,
+        resizeObserver: null,
+        resizeTimer: null
+      };
+    },
+    computed: {
+      styles() {
+        return {
+          height: formatSize(this.height)
+        };
+      },
+      renderItemHeight() {
+        return formatSize(this.itemHeight);
+      },
+      total() {
+        return this.items.length;
+      },
+      visibleCount() {
+        if (!this.clientHeight || !this.itemHeight) return 20;
+        return Math.ceil(this.clientHeight / this.itemHeight) + this.buffer * 2;
+      },
+      startIndex() {
+        return Math.max(0, Math.floor(this.scrollTop / this.itemHeight));
+      },
+      endIndex() {
+        return Math.min(this.total, this.startIndex + this.visibleCount);
+      },
+      visibleItems() {
+        return this.items.slice(this.startIndex, this.endIndex);
+      },
+      topPlaceholderHeight() {
+        return formatSize(this.startIndex * this.itemHeight);
+      },
+      bottomPlaceholderHeight() {
+        return formatSize((this.total - this.endIndex) * this.itemHeight);
+      }
+    },
+    mounted() {
+      this.updateClientHeight();
+      this.setupResizeListener();
+    },
+    beforeDestroy() {
+      this.cleanupResizeListener();
+    },
+    methods: {
+      /**
+       * 判断是否应使用 nodeKey 字段
+       */
+      _shouldUseNodeKey() {
+        return this.nodeKey && typeof this.nodeKey === 'string' && this.nodeKey.trim() !== '';
+      },
+
+      /**
+       * 获取 item 的唯一 key（用于 v-for）
+       */
+      getNodeKey(item, index) {
+        if (this._shouldUseNodeKey() && item != null && typeof item === 'object') {
+          const key = item[this.nodeKey];
+          if (key != null) {
+            return key;
+          }
+        }
+        return index;
+      },
+
+      updateClientHeight() {
+        if (this.$refs.rootRef) {
+          this.clientHeight = this.$refs.rootRef.clientHeight;
+        }
+      },
+
+      setupResizeListener() {
+        if (typeof ResizeObserver !== 'undefined') {
+          this.resizeObserver = new ResizeObserver(() => {
+            this.updateClientHeight();
+          });
+          this.resizeObserver.observe(this.$refs.rootRef);
+        } else {
+          window.addEventListener('resize', this.handleWindowResize);
+        }
+      },
+
+      cleanupResizeListener() {
+        if (this.resizeObserver) {
+          this.resizeObserver.disconnect();
+          this.resizeObserver = null;
+        }
+        if (this.resizeTimer) {
+          clearTimeout(this.resizeTimer);
+          this.resizeTimer = null;
+        }
+        window.removeEventListener('resize', this.handleWindowResize);
+      },
+
+      handleWindowResize() {
+        if (this.resizeTimer) {
+          clearTimeout(this.resizeTimer);
+        }
+        this.resizeTimer = setTimeout(() => {
+          this.updateClientHeight();
+        }, 100);
+      },
+
+      handleScroll(e) {
+        this.scrollTop = e.target.scrollTop;
+        this.$emit('scroll', e);
+
+        const { scrollHeight, clientHeight, scrollTop } = e.target;
+        if (scrollTop === 0) this.$emit('reach-top');
+        if (scrollHeight - clientHeight - scrollTop < 100) this.$emit('reach-bottom');
+        this.$emit('visible-change', { startIndex: this.startIndex, endIndex: this.endIndex });
+      },
+
+      refresh() {
+        this.updateClientHeight();
+      },
+
+      /**
+       * 内部滚动方法（仅设置 DOM scrollTop，状态由 handleScroll 同步）
+       */
+      _setScrollTop(scrollTop) {
+        if (this.$refs.rootRef) {
+          this.$refs.rootRef.scrollTop = scrollTop;
+        }
+      },
+
+      /**
+       * 滚动到指定目标
+       * - 若启用了有效的 nodeKey，则 target 视为 keyValue
+       * - 否则，target 必须是 number（index）
+       */
+      scrollTo(target) {
+        if (target == null) {
+          // eslint-disable-next-line no-console
+          console.warn('[HiVirtualList] scrollTo: target cannot be null or undefined');
+          return;
+        }
+
+        let index = -1;
+
+        // 使用 getNodeKey 生成的 key 进行匹配（严格对齐）
+        if (this._shouldUseNodeKey()) {
+          index = this.items.findIndex((item, i) => {
+            return this.getNodeKey(item, i) === target;
+          });
+        } else {
+          // 降级到 index 模式
+          if (typeof target === 'number' && target >= 0 && target < this.total) {
+            index = target;
+          } else {
+            // eslint-disable-next-line no-console
+            console.warn(
+              '[HiVirtualList] scrollTo: when nodeKey is not provided, target must be a valid index (number).'
+            );
+            return;
+          }
+        }
+
+        if (index < 0 || index >= this.total) {
+          if (this._shouldUseNodeKey()) {
+            // eslint-disable-next-line no-console
+            console.warn(`[HiVirtualList] scrollTo: item with key "${target}" not found`);
+          } else {
+            // eslint-disable-next-line no-console
+            console.warn(`[HiVirtualList] scrollTo: index ${target} is out of range [0, ${this.total})`);
+          }
+          return;
+        }
+
+        this._setScrollTop(index * this.itemHeight);
+      },
+
+      scrollToTop() {
+        this._setScrollTop(0);
+      },
+
+      scrollToBottom() {
+        this._setScrollTop(this.total * this.itemHeight);
+      },
+
+      getVisibleRange() {
+        return {
+          startIndex: this.startIndex,
+          endIndex: this.endIndex
+        };
+      }
+    }
+  };
+
+  function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+      if (typeof shadowMode !== 'boolean') {
+          createInjectorSSR = createInjector;
+          createInjector = shadowMode;
+          shadowMode = false;
+      }
+      // Vue.extend constructor export interop.
+      const options = typeof script === 'function' ? script.options : script;
+      // render functions
+      if (template && template.render) {
+          options.render = template.render;
+          options.staticRenderFns = template.staticRenderFns;
+          options._compiled = true;
+          // functional template
+          if (isFunctionalTemplate) {
+              options.functional = true;
+          }
+      }
+      // scopedId
+      if (scopeId) {
+          options._scopeId = scopeId;
+      }
+      let hook;
+      if (moduleIdentifier) {
+          // server build
+          hook = function (context) {
+              // 2.3 injection
+              context =
+                  context || // cached call
+                      (this.$vnode && this.$vnode.ssrContext) || // stateful
+                      (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
+              // 2.2 with runInNewContext: true
+              if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+                  context = __VUE_SSR_CONTEXT__;
+              }
+              // inject component styles
+              if (style) {
+                  style.call(this, createInjectorSSR(context));
+              }
+              // register component module identifier for async chunk inference
+              if (context && context._registeredComponents) {
+                  context._registeredComponents.add(moduleIdentifier);
+              }
+          };
+          // used by ssr in case component is cached and beforeCreate
+          // never gets called
+          options._ssrRegister = hook;
+      }
+      else if (style) {
+          hook = shadowMode
+              ? function (context) {
+                  style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
+              }
+              : function (context) {
+                  style.call(this, createInjector(context));
+              };
+      }
+      if (hook) {
+          if (options.functional) {
+              // register for functional component in vue file
+              const originalRender = options.render;
+              options.render = function renderWithStyleInjection(h, context) {
+                  hook.call(context);
+                  return originalRender(h, context);
+              };
+          }
+          else {
+              // inject component registration as beforeCreate hook
+              const existing = options.beforeCreate;
+              options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+          }
+      }
+      return script;
+  }
+
+  /* script */
+  const __vue_script__ = script;
+
+  /* template */
+  var __vue_render__ = function () {
+    var _vm = this;
+    var _h = _vm.$createElement;
+    var _c = _vm._self._c || _h;
+    return _c(
+      "div",
+      {
+        ref: "rootRef",
+        staticClass: "hi-virtual-list",
+        style: _vm.styles,
+        on: { scroll: _vm.handleScroll },
+      },
+      [
+        _c("div", {
+          staticClass: "hi-virtual-list--placeholder",
+          style: { height: _vm.topPlaceholderHeight },
+        }),
+        _vm._v(" "),
+        _vm._l(_vm.visibleItems, function (item, i) {
+          return _c(
+            "div",
+            {
+              key: _vm.getNodeKey(item, _vm.startIndex + i),
+              staticClass: "hi-virtual-list--item-wrapper",
+              style: { height: _vm.renderItemHeight },
+            },
+            [_vm._t("default", null, { item: item, index: _vm.startIndex + i })],
+            2
+          )
+        }),
+        _vm._v(" "),
+        _c("div", {
+          staticClass: "hi-virtual-list--placeholder",
+          style: { height: _vm.bottomPlaceholderHeight },
+        }),
+      ],
+      2
+    )
+  };
   var __vue_staticRenderFns__ = [];
   __vue_render__._withStripped = true;
 
@@ -605,7 +1034,7 @@
     );
 
   // 显式设置 name（避免 .vue 丢失）
-  __vue_component__.name = 'HiTitle';
+  __vue_component__.name = 'HiVirtualList';
 
   // 添加 install
   __vue_component__.install = Vue => {
@@ -614,6 +1043,7 @@
 
   // eslint-disable-next-line prettier/prettier
   const components = [
+    __vue_component__$2,
     __vue_component__$1,
     __vue_component__
   ];
@@ -626,8 +1056,9 @@
 
   var index = {
     install,
-    HiExpandText: __vue_component__$1,
-    HiTitle: __vue_component__
+    HiExpandText: __vue_component__$2,
+    HiTitle: __vue_component__$1,
+    HiVirtualList: __vue_component__
   };
 
   return index;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@holyer-lib/ui",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "main": "dist/ui.cjs.js",
   "module": "dist/ui.esm.js",
   "unpkg": "dist/ui.umd.js",