@holyer-lib/ui 0.0.9 → 0.0.10

package/dist/ui.cjs.js

@@ -14,6 +14,318 @@ function __$styleInject(css) {
     return css;
 }
 
+function __$styleInject$1(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$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");
+
+//
+
+var script$1 = {
+  name: 'HiExpandText',
+  props: {
+    content: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * [0]: 展开时显示的文本，[1]: 收起时显示的文本
+     */
+    label: {
+      type: Array,
+      default: () => ['展开', '收起'],
+      validator: arr => {
+        return arr.length === 2 && arr.every(s => typeof s === 'string');
+      }
+    },
+
+    lineClamp: {
+      type: Number,
+      default: 2
+    }
+  },
+  data() {
+    return {
+      showToggle: false,
+      isExpanded: false,
+      resizeTimer: null,
+      resizeObserver: null
+    };
+  },
+  computed: {
+    expandText() {
+      return this.isExpanded ? this.label[1] : this.label[0];
+    },
+
+    textClass() {
+      return {
+        'hi-expand-text--content': true,
+        'hi-expand-text--content__show-toggle': this.showToggle,
+        'hi-expand-text--content__expanded': this.isExpanded
+      };
+    }
+  },
+
+  watch: {
+    content() {
+      this.$nextTick(this.checkEllipsis);
+    }
+  },
+  mounted() {
+    this.checkEllipsis();
+    window.addEventListener('resize', this.handleResize);
+    if (window.ResizeObserver && this.$el) {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.handleResize();
+      });
+      this.resizeObserver.observe(this.$el);
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
+    if (this.resizeObserver) this.resizeObserver.disconnect();
+    if (this.resizeTimer) clearTimeout(this.resizeTimer);
+  },
+
+  methods: {
+    handleResize() {
+      if (this.resizeTimer) clearTimeout(this.resizeTimer);
+      this.resizeTimer = setTimeout(() => {
+        this.checkEllipsis();
+      }, 100);
+    },
+
+    /**
+     * @Description 检查是否存在溢出情况，兼容展开和收起两种状态
+     * @Author holyer
+     * @Date 2026/02/08 17:01:51
+     */
+    checkEllipsis() {
+      const textEl = this.$refs.textRef;
+      if (!textEl || !textEl.offsetParent) {
+        this.showToggle = false;
+        return;
+      }
+
+      if (this.isExpanded) {
+        // 展开状态下：模拟收起状态，检测是否需要 toggle
+        this.showToggle = this.wouldOverflowIfCollapsed(textEl);
+      } else {
+        // 收起状态下：直接检测是否溢出
+        this.showToggle = textEl.scrollHeight - textEl.clientHeight > 2;
+      }
+    },
+
+    /**
+     * 模拟收起状态，检测内容是否会溢出
+     */
+    wouldOverflowIfCollapsed(el) {
+      // 1. 保存原始状态
+      const originalDisplay = el.style.display;
+      const originalWebkitLineClamp = el.style.webkitLineClamp;
+      const originalClassList = el.className;
+
+      try {
+        // 2. 临时应用“收起”样式，移除 --expanded 和 --show-toggle
+        el.className = 'hi-expand-text--content';
+        el.style.display = '-webkit-box';
+        el.style.webkitBoxOrient = 'vertical';
+        el.style.overflow = 'hidden';
+        el.style.webkitLineClamp = this.lineClamp;
+
+        // 3. 强制 reflow（触发 layout）
+        const { scrollHeight, clientHeight } = el;
+
+        // 4. 判断是否溢出
+        return scrollHeight - clientHeight > 2;
+      } finally {
+        // 5. 恢复原始状态（确保无副作用）
+        el.className = originalClassList;
+        el.style.display = originalDisplay;
+        el.style.webkitLineClamp = originalWebkitLineClamp;
+      }
+    },
+
+    handleToggle() {
+      this.isExpanded = !this.isExpanded;
+      this.$emit('toggle', this.isExpanded);
+    },
+
+    // 供外部手动更新
+    update() {
+      this.$nextTick(this.checkEllipsis);
+    }
+  }
+};
+
+function normalizeComponent$1(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__$1 = script$1;
+
+/* template */
+var __vue_render__$1 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(
+    "div",
+    {
+      staticClass: "hi-expand-text",
+      style: { "--hi-expand-text-line-clamp": _vm.lineClamp },
+    },
+    [
+      _c(
+        "div",
+        { ref: "textRef", class: _vm.textClass },
+        [
+          _vm.showToggle
+            ? _c(
+                "div",
+                {
+                  staticClass: "hi-expand-text--toggle",
+                  on: { click: _vm.handleToggle },
+                },
+                [
+                  _vm._t("toggleText", function () {
+                    return [_vm._v(_vm._s(_vm.expandText))]
+                  }),
+                ],
+                2
+              )
+            : _vm._e(),
+          _vm._v(" "),
+          _vm._t("default", function () {
+            return [_vm._v(_vm._s(_vm.content))]
+          }),
+        ],
+        2
+      ),
+    ]
+  )
+};
+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
+  );
+
+__vue_component__$1.name = 'HiExpandText';
+
+// 添加 install
+__vue_component__$1.install = Vue => {
+  Vue.component(__vue_component__$1.name, __vue_component__$1);
+};
+
 function __$styleInject(css) {
     if (!css) return;
 
@@ -298,7 +610,11 @@ __vue_component__.install = Vue => {
   Vue.component(__vue_component__.name, __vue_component__);
 };
 
-const components = [__vue_component__];
+// eslint-disable-next-line prettier/prettier
+const components = [
+  __vue_component__$1,
+  __vue_component__
+];
 
 const install = function (Vue) {
   components.forEach(component => {
@@ -306,6 +622,10 @@ const install = function (Vue) {
   });
 };
 
-var index = { install, HiTitle: __vue_component__ };
+var index = {
+  install,
+  HiExpandText: __vue_component__$1,
+  HiTitle: __vue_component__
+};
 
 module.exports = index;

package/dist/ui.esm.js

@@ -10,6 +10,318 @@ function __$styleInject(css) {
     return css;
 }
 
+function __$styleInject$1(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$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");
+
+//
+
+var script$1 = {
+  name: 'HiExpandText',
+  props: {
+    content: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * [0]: 展开时显示的文本，[1]: 收起时显示的文本
+     */
+    label: {
+      type: Array,
+      default: () => ['展开', '收起'],
+      validator: arr => {
+        return arr.length === 2 && arr.every(s => typeof s === 'string');
+      }
+    },
+
+    lineClamp: {
+      type: Number,
+      default: 2
+    }
+  },
+  data() {
+    return {
+      showToggle: false,
+      isExpanded: false,
+      resizeTimer: null,
+      resizeObserver: null
+    };
+  },
+  computed: {
+    expandText() {
+      return this.isExpanded ? this.label[1] : this.label[0];
+    },
+
+    textClass() {
+      return {
+        'hi-expand-text--content': true,
+        'hi-expand-text--content__show-toggle': this.showToggle,
+        'hi-expand-text--content__expanded': this.isExpanded
+      };
+    }
+  },
+
+  watch: {
+    content() {
+      this.$nextTick(this.checkEllipsis);
+    }
+  },
+  mounted() {
+    this.checkEllipsis();
+    window.addEventListener('resize', this.handleResize);
+    if (window.ResizeObserver && this.$el) {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.handleResize();
+      });
+      this.resizeObserver.observe(this.$el);
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
+    if (this.resizeObserver) this.resizeObserver.disconnect();
+    if (this.resizeTimer) clearTimeout(this.resizeTimer);
+  },
+
+  methods: {
+    handleResize() {
+      if (this.resizeTimer) clearTimeout(this.resizeTimer);
+      this.resizeTimer = setTimeout(() => {
+        this.checkEllipsis();
+      }, 100);
+    },
+
+    /**
+     * @Description 检查是否存在溢出情况，兼容展开和收起两种状态
+     * @Author holyer
+     * @Date 2026/02/08 17:01:51
+     */
+    checkEllipsis() {
+      const textEl = this.$refs.textRef;
+      if (!textEl || !textEl.offsetParent) {
+        this.showToggle = false;
+        return;
+      }
+
+      if (this.isExpanded) {
+        // 展开状态下：模拟收起状态，检测是否需要 toggle
+        this.showToggle = this.wouldOverflowIfCollapsed(textEl);
+      } else {
+        // 收起状态下：直接检测是否溢出
+        this.showToggle = textEl.scrollHeight - textEl.clientHeight > 2;
+      }
+    },
+
+    /**
+     * 模拟收起状态，检测内容是否会溢出
+     */
+    wouldOverflowIfCollapsed(el) {
+      // 1. 保存原始状态
+      const originalDisplay = el.style.display;
+      const originalWebkitLineClamp = el.style.webkitLineClamp;
+      const originalClassList = el.className;
+
+      try {
+        // 2. 临时应用“收起”样式，移除 --expanded 和 --show-toggle
+        el.className = 'hi-expand-text--content';
+        el.style.display = '-webkit-box';
+        el.style.webkitBoxOrient = 'vertical';
+        el.style.overflow = 'hidden';
+        el.style.webkitLineClamp = this.lineClamp;
+
+        // 3. 强制 reflow（触发 layout）
+        const { scrollHeight, clientHeight } = el;
+
+        // 4. 判断是否溢出
+        return scrollHeight - clientHeight > 2;
+      } finally {
+        // 5. 恢复原始状态（确保无副作用）
+        el.className = originalClassList;
+        el.style.display = originalDisplay;
+        el.style.webkitLineClamp = originalWebkitLineClamp;
+      }
+    },
+
+    handleToggle() {
+      this.isExpanded = !this.isExpanded;
+      this.$emit('toggle', this.isExpanded);
+    },
+
+    // 供外部手动更新
+    update() {
+      this.$nextTick(this.checkEllipsis);
+    }
+  }
+};
+
+function normalizeComponent$1(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__$1 = script$1;
+
+/* template */
+var __vue_render__$1 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(
+    "div",
+    {
+      staticClass: "hi-expand-text",
+      style: { "--hi-expand-text-line-clamp": _vm.lineClamp },
+    },
+    [
+      _c(
+        "div",
+        { ref: "textRef", class: _vm.textClass },
+        [
+          _vm.showToggle
+            ? _c(
+                "div",
+                {
+                  staticClass: "hi-expand-text--toggle",
+                  on: { click: _vm.handleToggle },
+                },
+                [
+                  _vm._t("toggleText", function () {
+                    return [_vm._v(_vm._s(_vm.expandText))]
+                  }),
+                ],
+                2
+              )
+            : _vm._e(),
+          _vm._v(" "),
+          _vm._t("default", function () {
+            return [_vm._v(_vm._s(_vm.content))]
+          }),
+        ],
+        2
+      ),
+    ]
+  )
+};
+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
+  );
+
+__vue_component__$1.name = 'HiExpandText';
+
+// 添加 install
+__vue_component__$1.install = Vue => {
+  Vue.component(__vue_component__$1.name, __vue_component__$1);
+};
+
 function __$styleInject(css) {
     if (!css) return;
 
@@ -294,7 +606,11 @@ __vue_component__.install = Vue => {
   Vue.component(__vue_component__.name, __vue_component__);
 };
 
-const components = [__vue_component__];
+// eslint-disable-next-line prettier/prettier
+const components = [
+  __vue_component__$1,
+  __vue_component__
+];
 
 const install = function (Vue) {
   components.forEach(component => {
@@ -302,6 +618,10 @@ const install = function (Vue) {
   });
 };
 
-var index = { install, HiTitle: __vue_component__ };
+var index = {
+  install,
+  HiExpandText: __vue_component__$1,
+  HiTitle: __vue_component__
+};
 
 export { index as default };

package/dist/ui.umd.js

@@ -16,6 +16,318 @@
       return css;
   }
 
+  function __$styleInject$1(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$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");
+
+  //
+
+  var script$1 = {
+    name: 'HiExpandText',
+    props: {
+      content: {
+        type: String,
+        default: ''
+      },
+
+      /**
+       * [0]: 展开时显示的文本，[1]: 收起时显示的文本
+       */
+      label: {
+        type: Array,
+        default: () => ['展开', '收起'],
+        validator: arr => {
+          return arr.length === 2 && arr.every(s => typeof s === 'string');
+        }
+      },
+
+      lineClamp: {
+        type: Number,
+        default: 2
+      }
+    },
+    data() {
+      return {
+        showToggle: false,
+        isExpanded: false,
+        resizeTimer: null,
+        resizeObserver: null
+      };
+    },
+    computed: {
+      expandText() {
+        return this.isExpanded ? this.label[1] : this.label[0];
+      },
+
+      textClass() {
+        return {
+          'hi-expand-text--content': true,
+          'hi-expand-text--content__show-toggle': this.showToggle,
+          'hi-expand-text--content__expanded': this.isExpanded
+        };
+      }
+    },
+
+    watch: {
+      content() {
+        this.$nextTick(this.checkEllipsis);
+      }
+    },
+    mounted() {
+      this.checkEllipsis();
+      window.addEventListener('resize', this.handleResize);
+      if (window.ResizeObserver && this.$el) {
+        this.resizeObserver = new ResizeObserver(() => {
+          this.handleResize();
+        });
+        this.resizeObserver.observe(this.$el);
+      }
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.handleResize);
+      if (this.resizeObserver) this.resizeObserver.disconnect();
+      if (this.resizeTimer) clearTimeout(this.resizeTimer);
+    },
+
+    methods: {
+      handleResize() {
+        if (this.resizeTimer) clearTimeout(this.resizeTimer);
+        this.resizeTimer = setTimeout(() => {
+          this.checkEllipsis();
+        }, 100);
+      },
+
+      /**
+       * @Description 检查是否存在溢出情况，兼容展开和收起两种状态
+       * @Author holyer
+       * @Date 2026/02/08 17:01:51
+       */
+      checkEllipsis() {
+        const textEl = this.$refs.textRef;
+        if (!textEl || !textEl.offsetParent) {
+          this.showToggle = false;
+          return;
+        }
+
+        if (this.isExpanded) {
+          // 展开状态下：模拟收起状态，检测是否需要 toggle
+          this.showToggle = this.wouldOverflowIfCollapsed(textEl);
+        } else {
+          // 收起状态下：直接检测是否溢出
+          this.showToggle = textEl.scrollHeight - textEl.clientHeight > 2;
+        }
+      },
+
+      /**
+       * 模拟收起状态，检测内容是否会溢出
+       */
+      wouldOverflowIfCollapsed(el) {
+        // 1. 保存原始状态
+        const originalDisplay = el.style.display;
+        const originalWebkitLineClamp = el.style.webkitLineClamp;
+        const originalClassList = el.className;
+
+        try {
+          // 2. 临时应用“收起”样式，移除 --expanded 和 --show-toggle
+          el.className = 'hi-expand-text--content';
+          el.style.display = '-webkit-box';
+          el.style.webkitBoxOrient = 'vertical';
+          el.style.overflow = 'hidden';
+          el.style.webkitLineClamp = this.lineClamp;
+
+          // 3. 强制 reflow（触发 layout）
+          const { scrollHeight, clientHeight } = el;
+
+          // 4. 判断是否溢出
+          return scrollHeight - clientHeight > 2;
+        } finally {
+          // 5. 恢复原始状态（确保无副作用）
+          el.className = originalClassList;
+          el.style.display = originalDisplay;
+          el.style.webkitLineClamp = originalWebkitLineClamp;
+        }
+      },
+
+      handleToggle() {
+        this.isExpanded = !this.isExpanded;
+        this.$emit('toggle', this.isExpanded);
+      },
+
+      // 供外部手动更新
+      update() {
+        this.$nextTick(this.checkEllipsis);
+      }
+    }
+  };
+
+  function normalizeComponent$1(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__$1 = script$1;
+
+  /* template */
+  var __vue_render__$1 = function () {
+    var _vm = this;
+    var _h = _vm.$createElement;
+    var _c = _vm._self._c || _h;
+    return _c(
+      "div",
+      {
+        staticClass: "hi-expand-text",
+        style: { "--hi-expand-text-line-clamp": _vm.lineClamp },
+      },
+      [
+        _c(
+          "div",
+          { ref: "textRef", class: _vm.textClass },
+          [
+            _vm.showToggle
+              ? _c(
+                  "div",
+                  {
+                    staticClass: "hi-expand-text--toggle",
+                    on: { click: _vm.handleToggle },
+                  },
+                  [
+                    _vm._t("toggleText", function () {
+                      return [_vm._v(_vm._s(_vm.expandText))]
+                    }),
+                  ],
+                  2
+                )
+              : _vm._e(),
+            _vm._v(" "),
+            _vm._t("default", function () {
+              return [_vm._v(_vm._s(_vm.content))]
+            }),
+          ],
+          2
+        ),
+      ]
+    )
+  };
+  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
+    );
+
+  __vue_component__$1.name = 'HiExpandText';
+
+  // 添加 install
+  __vue_component__$1.install = Vue => {
+    Vue.component(__vue_component__$1.name, __vue_component__$1);
+  };
+
   function __$styleInject(css) {
       if (!css) return;
 
@@ -300,7 +612,11 @@
     Vue.component(__vue_component__.name, __vue_component__);
   };
 
-  const components = [__vue_component__];
+  // eslint-disable-next-line prettier/prettier
+  const components = [
+    __vue_component__$1,
+    __vue_component__
+  ];
 
   const install = function (Vue) {
     components.forEach(component => {
@@ -308,7 +624,11 @@
     });
   };
 
-  var index = { install, HiTitle: __vue_component__ };
+  var index = {
+    install,
+    HiExpandText: __vue_component__$1,
+    HiTitle: __vue_component__
+  };
 
   return index;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@holyer-lib/ui",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "main": "dist/ui.cjs.js",
   "module": "dist/ui.esm.js",
   "unpkg": "dist/ui.umd.js",
@@ -9,11 +9,5 @@
   ],
   "publishConfig": {
     "access": "public"
-  },
-  "dependencies": {
-    "@holyer-lib/title": "1.0.2"
-  },
-  "peerDependencies": {
-    "vue": "2.6.14"
   }
 }