@nutui/nutui 3.1.22-beta.5 → 3.1.23-beta.1

package/dist/packages/_es/Elevator.js

@@ -1,65 +1,262 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { ref as e, reactive as t, computed as l, onMounted as i, watch as c, nextTick as n, toRefs as r, openBlock as s, createElementBlock as o, normalizeClass as a, createElementVNode as u, normalizeStyle as d, Fragment as h, renderList as p, toDisplayString as _, renderSlot as x, withDirectives as y, vShow as g, createCommentVNode as v, withModifiers as f } from "vue";
-import { c as m } from "./component.js";
-import { u as k } from "./index3.js";
-import { _ as H } from "./plugin-vue_export-helper.js";
+import { ref, reactive, computed, onMounted, watch, nextTick, toRefs, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, Fragment, renderList, toDisplayString, renderSlot, withDirectives, vShow, createCommentVNode, withModifiers } from "vue";
+import { c as createComponent } from "./component.js";
+import { u as useExpose } from "./index3.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const { componentName: I, create: S } = m("elevator"), K = S({ props: { height: { type: [Number, String], default: "200px" }, acceptKey: { type: [String], default: "title" }, indexList: { type: Array, default: () => [] }, isSticky: { type: [Boolean], default: false }, spaceHeight: { type: [Number], default: 23 }, titleHeight: { type: [Number], default: 35 } }, emits: ["click-item", "click-index"], setup(s2, o2) {
-  const a2 = e(null), u2 = t({ anchorIndex: 0, codeIndex: 0, listHeight: [], listGroup: [], touchState: { y1: 0, y2: 0 }, scrollStart: false, currentIndex: 0, currentData: {}, currentKey: "", scrollY: 0, diff: -1, fixedTop: 0 }), d2 = l(() => ({ [I]: true })), h2 = l(() => ({ transform: `translate3d(0, ${u2.scrollY + u2.fixedTop}px, 0)` })), p2 = l(() => a2.value.clientHeight), _2 = () => {
-    let e2 = 0;
-    u2.listHeight.push(e2);
-    for (let t2 = 0; t2 < u2.listGroup.length; t2++) {
-      e2 += u2.listGroup[t2].clientHeight, u2.listHeight.push(e2);
+const { componentName, create } = createComponent("elevator");
+const _sfc_main = create({
+  props: {
+    height: {
+      type: [Number, String],
+      default: "200px"
+    },
+    acceptKey: {
+      type: [String],
+      default: "title"
+    },
+    indexList: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    isSticky: {
+      type: [Boolean],
+      default: false
+    },
+    spaceHeight: {
+      type: [Number],
+      default: 23
+    },
+    titleHeight: {
+      type: [Number],
+      default: 35
     }
-  }, x2 = (e2) => {
-    (e2 || e2 === 0) && (e2 < 0 && (e2 = 0), e2 > u2.listHeight.length - 2 && (e2 = u2.listHeight.length - 2), u2.codeIndex = e2, a2.value.scrollTo(0, u2.listHeight[e2]));
-  }, y2 = (e2) => {
-    let t2 = e2.target.scrollTop;
-    const l2 = u2.listHeight;
-    u2.scrollY = t2;
-    for (let e3 = 0; e3 < l2.length - 1; e3++) {
-      let t3 = l2[e3], i2 = l2[e3 + 1];
-      if (u2.scrollY >= t3 && u2.scrollY < i2)
-        return u2.currentIndex = e3, void (u2.diff = i2 - u2.scrollY);
-    }
-    u2.currentIndex = l2.length - 2;
-  };
-  return i(() => {
-    a2.value.addEventListener("scroll", y2);
-  }), k({ scrollTo: x2 }), c(() => u2.listGroup.length, () => {
-    u2.listHeight = [], n(_2);
-  }), c(() => u2.diff, (e2) => {
-    const t2 = u2.listHeight;
-    let l2 = e2 > 0 && e2 < s2.titleHeight ? e2 - s2.titleHeight : 0;
-    u2.scrollY + p2.value === t2[t2.length - 1] && l2 !== 0 && (l2 = 0), u2.fixedTop !== l2 && (u2.fixedTop = l2);
-  }), { classes: d2, ...r(u2), fixedStyle: h2, clientHeight: p2, setListGroup: (e2) => {
-    n(() => {
-      u2.listGroup.includes(e2) || e2 == null || u2.listGroup.push(e2);
+  },
+  emits: ["click-item", "click-index"],
+  setup(props, context) {
+    const listview = ref(null);
+    const state = reactive({
+      anchorIndex: 0,
+      codeIndex: 0,
+      listHeight: [],
+      listGroup: [],
+      touchState: {
+        y1: 0,
+        y2: 0
+      },
+      scrollStart: false,
+      currentIndex: 0,
+      currentData: {},
+      currentKey: "",
+      scrollY: 0,
+      diff: -1,
+      fixedTop: 0
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const fixedStyle = computed(() => {
+      return {
+        transform: `translate3d(0, ${state.scrollY + state.fixedTop}px, 0)`
+      };
+    });
+    const clientHeight = computed(() => {
+      return listview.value.clientHeight;
+    });
+    const getData = (el, name) => {
+      const prefix = "data-";
+      return el.getAttribute(prefix + name);
+    };
+    const setListGroup = (el) => {
+      nextTick(() => {
+        if (!state.listGroup.includes(el) && el != null) {
+          state.listGroup.push(el);
+        }
+      });
+    };
+    const calculateHeight = () => {
+      let height = 0;
+      state.listHeight.push(height);
+      for (let i = 0; i < state.listGroup.length; i++) {
+        let item = state.listGroup[i];
+        height += item.clientHeight;
+        state.listHeight.push(height);
+      }
+    };
+    const scrollTo = (index2) => {
+      if (!index2 && index2 !== 0) {
+        return;
+      }
+      if (index2 < 0)
+        index2 = 0;
+      if (index2 > state.listHeight.length - 2)
+        index2 = state.listHeight.length - 2;
+      state.codeIndex = index2;
+      listview.value.scrollTo(0, state.listHeight[index2]);
+    };
+    const touchStart = (e) => {
+      state.scrollStart = true;
+      let index2 = getData(e.target, "index");
+      let firstTouch = e.touches[0];
+      state.touchState.y1 = firstTouch.pageY;
+      state.anchorIndex = +index2;
+      state.codeIndex = +index2;
+      scrollTo(+index2);
+    };
+    const touchMove = (e) => {
+      let firstTouch = e.touches[0];
+      state.touchState.y2 = firstTouch.pageY;
+      let delta = (state.touchState.y2 - state.touchState.y1) / props.spaceHeight | 0;
+      state.codeIndex = state.anchorIndex + delta;
+      scrollTo(state.codeIndex);
+    };
+    const touchEnd = () => {
+      state.scrollStart = false;
+    };
+    const handleClickItem = (key, item) => {
+      context.emit("click-item", key, item);
+      state.currentData = item;
+      state.currentKey = key;
+    };
+    const handleClickIndex = (key) => {
+      context.emit("click-index", key);
+    };
+    const listViewScroll = (e) => {
+      let target = e.target;
+      let scrollTop = target.scrollTop;
+      const listHeight = state.listHeight;
+      state.scrollY = scrollTop;
+      for (let i = 0; i < listHeight.length - 1; i++) {
+        let height1 = listHeight[i];
+        let height2 = listHeight[i + 1];
+        if (state.scrollY >= height1 && state.scrollY < height2) {
+          state.currentIndex = i;
+          state.diff = height2 - state.scrollY;
+          return;
+        }
+      }
+      state.currentIndex = listHeight.length - 2;
+    };
+    onMounted(() => {
+      listview.value.addEventListener("scroll", listViewScroll);
+    });
+    useExpose({
+      scrollTo
+    });
+    watch(() => state.listGroup.length, () => {
+      state.listHeight = [];
+      nextTick(calculateHeight);
+    });
+    watch(() => state.diff, (newVal) => {
+      const listHeight = state.listHeight;
+      let fixedTop = newVal > 0 && newVal < props.titleHeight ? newVal - props.titleHeight : 0;
+      if (state.scrollY + clientHeight.value === listHeight[listHeight.length - 1]) {
+        if (fixedTop !== 0)
+          fixedTop = 0;
+      }
+      if (state.fixedTop === fixedTop)
+        return;
+      state.fixedTop = fixedTop;
     });
-  }, listview: a2, touchStart: (e2) => {
-    u2.scrollStart = true;
-    let t2 = (l2 = e2.target, i2 = "index", l2.getAttribute("data-" + i2));
-    var l2, i2;
-    let c2 = e2.touches[0];
-    u2.touchState.y1 = c2.pageY, u2.anchorIndex = +t2, u2.codeIndex = +t2, x2(+t2);
-  }, touchMove: (e2) => {
-    let t2 = e2.touches[0];
-    u2.touchState.y2 = t2.pageY;
-    let l2 = (u2.touchState.y2 - u2.touchState.y1) / s2.spaceHeight | 0;
-    u2.codeIndex = u2.anchorIndex + l2, x2(u2.codeIndex);
-  }, touchEnd: () => {
-    u2.scrollStart = false;
-  }, handleClickItem: (e2, t2) => {
-    o2.emit("click-item", e2, t2), u2.currentData = t2, u2.currentKey = e2;
-  }, handleClickIndex: (e2) => {
-    o2.emit("click-index", e2);
-  } };
-} }), w = { class: "nut-elevator__list__item__code" }, L = ["onClick"], T = ["innerHTML"], Y = { class: "fixed-title" }, C = { class: "nut-elevator__bars__inner" }, G = ["data-index", "onClick"];
-var b = H(K, [["render", function(e2, t2, l2, i2, c2, n2) {
-  return s(), o("view", { class: a(e2.classes) }, [u("view", { class: "nut-elevator__list", ref: "listview", style: d({ height: isNaN(+e2.height) ? e2.height : `${e2.height}px` }) }, [(s(true), o(h, null, p(e2.indexList, (t3) => (s(), o("view", { class: "nut-elevator__list__item", key: t3[e2.acceptKey], ref: e2.setListGroup }, [u("view", w, _(t3[e2.acceptKey]), 1), (s(true), o(h, null, p(t3.list, (l3) => (s(), o("view", { class: a(["nut-elevator__list__item__name", { "nut-elevator__list__item__name--highcolor": e2.currentData.id === l3.id && e2.currentKey === t3[e2.acceptKey] }]), key: l3.id, onClick: (i3) => e2.handleClickItem(t3[e2.acceptKey], l3) }, [e2.$slots.default ? x(e2.$slots, "default", { key: 1, item: l3 }) : (s(), o("span", { key: 0, innerHTML: l3.name }, null, 8, T))], 10, L))), 128))], 512))), 128)), e2.isSticky ? y((s(), o("view", { key: 0, class: "nut-elevator__list__fixed", style: d(e2.fixedStyle) }, [u("span", Y, _(e2.indexList[e2.currentIndex][e2.acceptKey]), 1)], 4)), [[g, e2.scrollY > 0]]) : v("", true)], 4), e2.indexList.length ? y((s(), o("view", { key: 0, class: "nut-elevator__code--current" }, _(e2.indexList[e2.codeIndex][e2.acceptKey]), 513)), [[g, e2.scrollStart]]) : v("", true), u("view", { class: "nut-elevator__bars", onTouchstart: t2[0] || (t2[0] = (...t3) => e2.touchStart && e2.touchStart(...t3)), onTouchmove: t2[1] || (t2[1] = f((...t3) => e2.touchMove && e2.touchMove(...t3), ["stop", "prevent"])), onTouchend: t2[2] || (t2[2] = (...t3) => e2.touchEnd && e2.touchEnd(...t3)) }, [u("view", C, [(s(true), o(h, null, p(e2.indexList, (t3, l3) => (s(), o("view", { class: a(["nut-elevator__bars__inner__item", { active: t3[e2.acceptKey] === e2.indexList[e2.currentIndex][e2.acceptKey] }]), "data-index": l3, key: t3[e2.acceptKey], onClick: (l4) => e2.handleClickIndex(t3[e2.acceptKey]) }, _(t3[e2.acceptKey]), 11, G))), 128))])], 32)], 2);
-}]]);
-export { b as default };
+    return {
+      classes,
+      ...toRefs(state),
+      fixedStyle,
+      clientHeight,
+      setListGroup,
+      listview,
+      touchStart,
+      touchMove,
+      touchEnd,
+      handleClickItem,
+      handleClickIndex
+    };
+  }
+});
+const _hoisted_1 = { class: "nut-elevator__list__item__code" };
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = ["innerHTML"];
+const _hoisted_4 = { class: "fixed-title" };
+const _hoisted_5 = { class: "nut-elevator__bars__inner" };
+const _hoisted_6 = ["data-index", "onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes)
+  }, [
+    createElementVNode("view", {
+      class: "nut-elevator__list",
+      ref: "listview",
+      style: normalizeStyle({ height: isNaN(+_ctx.height) ? _ctx.height : `${_ctx.height}px` })
+    }, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.indexList, (item) => {
+        return openBlock(), createElementBlock("view", {
+          class: "nut-elevator__list__item",
+          key: item[_ctx.acceptKey],
+          ref: _ctx.setListGroup
+        }, [
+          createElementVNode("view", _hoisted_1, toDisplayString(item[_ctx.acceptKey]), 1),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(item.list, (subitem) => {
+            return openBlock(), createElementBlock("view", {
+              class: normalizeClass(["nut-elevator__list__item__name", {
+                "nut-elevator__list__item__name--highcolor": _ctx.currentData.id === subitem.id && _ctx.currentKey === item[_ctx.acceptKey]
+              }]),
+              key: subitem["id"],
+              onClick: ($event) => _ctx.handleClickItem(item[_ctx.acceptKey], subitem)
+            }, [
+              !_ctx.$slots.default ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                innerHTML: subitem.name
+              }, null, 8, _hoisted_3)) : renderSlot(_ctx.$slots, "default", {
+                key: 1,
+                item: subitem
+              })
+            ], 10, _hoisted_2);
+          }), 128))
+        ], 512);
+      }), 128)),
+      _ctx.isSticky ? withDirectives((openBlock(), createElementBlock("view", {
+        key: 0,
+        class: "nut-elevator__list__fixed",
+        style: normalizeStyle(_ctx.fixedStyle)
+      }, [
+        createElementVNode("span", _hoisted_4, toDisplayString(_ctx.indexList[_ctx.currentIndex][_ctx.acceptKey]), 1)
+      ], 4)), [
+        [vShow, _ctx.scrollY > 0]
+      ]) : createCommentVNode("", true)
+    ], 4),
+    _ctx.indexList.length ? withDirectives((openBlock(), createElementBlock("view", {
+      key: 0,
+      class: "nut-elevator__code--current"
+    }, toDisplayString(_ctx.indexList[_ctx.codeIndex][_ctx.acceptKey]), 513)), [
+      [vShow, _ctx.scrollStart]
+    ]) : createCommentVNode("", true),
+    createElementVNode("view", {
+      class: "nut-elevator__bars",
+      onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.touchStart && _ctx.touchStart(...args)),
+      onTouchmove: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.touchMove && _ctx.touchMove(...args), ["stop", "prevent"])),
+      onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.touchEnd && _ctx.touchEnd(...args))
+    }, [
+      createElementVNode("view", _hoisted_5, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.indexList, (item, index2) => {
+          return openBlock(), createElementBlock("view", {
+            class: normalizeClass(["nut-elevator__bars__inner__item", { active: item[_ctx.acceptKey] === _ctx.indexList[_ctx.currentIndex][_ctx.acceptKey] }]),
+            "data-index": index2,
+            key: item[_ctx.acceptKey],
+            onClick: ($event) => _ctx.handleClickIndex(item[_ctx.acceptKey])
+          }, toDisplayString(item[_ctx.acceptKey]), 11, _hoisted_6);
+        }), 128))
+      ])
+    ], 32)
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Ellipsis.js

@@ -1,64 +1,206 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { ref as e, reactive as t, computed as n, watch as l, onMounted as o, toRefs as i, openBlock as c, createElementBlock as s, normalizeClass as d, toDisplayString as a, createCommentVNode as r, createTextVNode as p, withModifiers as x } from "vue";
-import { c as u } from "./component.js";
-import { _ as y } from "./plugin-vue_export-helper.js";
+import { ref, reactive, computed, watch, onMounted, toRefs, openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, createTextVNode, withModifiers } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const { componentName: m, create: g } = u("ellipsis"), f = g({ props: { content: { type: String, default: "" }, direction: { type: String, default: "end" }, rows: { type: [Number, String], default: 1 }, expandText: { type: String, default: "" }, collapseText: { type: String, default: "" }, symbol: { type: String, default: "..." } }, emits: ["click", "change"], setup(c2, { emit: s2 }) {
-  const d2 = e(null);
-  let a2 = null, r2 = 0;
-  const p2 = e(), x2 = t({ exceeded: false, expanded: false }), u2 = n(() => ({ [m]: true }));
-  l(() => c2.content, (e2, t2) => {
-    e2 != t2 && (a2 && document.body.appendChild(a2), y2());
-  }), o(() => {
-    y2();
-  });
-  const y2 = () => {
-    if (!d2.value)
-      return;
-    const e2 = window.getComputedStyle(d2.value);
-    a2 = document.createElement("div");
-    Array.prototype.slice.apply(e2).forEach((t3) => {
-      a2.style.setProperty(t3, e2.getPropertyValue(t3));
-    }), a2.style.position = "fixed", a2.style.left = "999999px", a2.style.top = "999999px", a2.style.zIndex = "-1000", a2.style.height = "auto", a2.style.minHeight = "auto", a2.style.maxHeight = "auto", a2.style.textOverflow = "clip", a2.style.whiteSpace = "normal", a2.style.webkitLineClamp = "unset", a2.style.display = "block";
-    const t2 = k2(e2.lineHeight);
-    r2 = Math.floor(t2 * (Number(c2.rows) + 0.5) + k2(e2.paddingTop) + k2(e2.paddingBottom)), a2.innerText = c2.content, document.body.appendChild(a2), g2();
-  }, g2 = () => {
-    if (a2.offsetHeight <= r2)
-      x2.exceeded = false;
-    else {
-      x2.exceeded = true;
-      const e2 = c2.content.length, t2 = Math.floor((0 + e2) / 2), n2 = c2.direction === "middle" ? h2([0, t2], [t2, e2]) : f2(0, e2);
-      p2.value = n2, document.body.removeChild(a2);
+const { componentName, create } = createComponent("ellipsis");
+const _sfc_main = create({
+  props: {
+    content: {
+      type: String,
+      default: ""
+    },
+    direction: {
+      type: String,
+      default: "end"
+    },
+    rows: {
+      type: [Number, String],
+      default: 1
+    },
+    expandText: {
+      type: String,
+      default: ""
+    },
+    collapseText: {
+      type: String,
+      default: ""
+    },
+    symbol: {
+      type: String,
+      default: "..."
     }
-  }, f2 = (e2, t2) => {
-    const n2 = x2.expanded ? c2.collapseText : c2.expandText, l2 = c2.content.length;
-    if (t2 - e2 <= 1)
-      return c2.direction === "end" ? { leading: c2.content.slice(0, e2) + c2.symbol } : { tailing: c2.symbol + c2.content.slice(t2, l2) };
-    const o2 = Math.round((e2 + t2) / 2);
-    return c2.direction === "end" ? a2.innerText = c2.content.slice(0, o2) + c2.symbol + n2 : a2.innerText = n2 + c2.symbol + c2.content.slice(o2, l2), a2.offsetHeight <= r2 ? c2.direction === "end" ? f2(o2, t2) : f2(e2, o2) : c2.direction === "end" ? f2(e2, o2) : f2(o2, t2);
-  }, h2 = (e2, t2) => {
-    const n2 = x2.expanded ? c2.collapseText : c2.expandText, l2 = c2.content.length;
-    if (e2[1] - e2[0] <= 1 && t2[1] - t2[0] <= 1)
-      return { leading: c2.content.slice(0, e2[0]) + c2.symbol, tailing: c2.symbol + c2.content.slice(t2[1], l2) };
-    const o2 = Math.floor((e2[0] + e2[1]) / 2), i2 = Math.ceil((t2[0] + t2[1]) / 2);
-    return a2.innerText = c2.content.slice(0, o2) + c2.symbol + n2 + c2.symbol + c2.content.slice(i2, l2), a2.offsetHeight <= r2 ? h2([o2, e2[1]], [t2[0], i2]) : h2([e2[0], o2], [i2, t2[1]]);
-  }, k2 = (e2) => {
-    if (!e2)
-      return 0;
-    const t2 = e2.match(/^\d*(\.\d*)?/);
-    return t2 ? Number(t2[0]) : 0;
-  };
-  return { ...i(x2), root: d2, ellipsis: p2, classes: u2, clickHandle: (e2) => {
-    e2 == 1 ? (x2.expanded = true, s2("change", "expand")) : (x2.expanded = false, s2("change", "collapse"));
-  }, handleClick: () => {
-    s2("click");
-  } };
-} }), h = { key: 0 }, k = { key: 1 }, b = { key: 2 };
-var T = y(f, [["render", function(e2, t2, n2, l2, o2, i2) {
-  return c(), s("view", { class: d(e2.classes), onClick: t2[2] || (t2[2] = (...t3) => e2.handleClick && e2.handleClick(...t3)), ref: "root" }, [e2.exceeded ? r("", true) : (c(), s("view", h, a(e2.content), 1)), e2.exceeded && !e2.expanded ? (c(), s("view", k, [p(a(e2.ellipsis.leading), 1), e2.expandText ? (c(), s("span", { key: 0, class: "nut-ellipsis-text", onClick: t2[0] || (t2[0] = x((t3) => e2.clickHandle(1), ["stop"])) }, a(e2.expandText), 1)) : r("", true), p(a(e2.ellipsis.tailing), 1)])) : r("", true), e2.exceeded && e2.expanded ? (c(), s("view", b, [p(a(e2.content) + " ", 1), e2.expandText ? (c(), s("span", { key: 0, class: "nut-ellipsis-text", onClick: t2[1] || (t2[1] = x((t3) => e2.clickHandle(2), ["stop"])) }, a(e2.collapseText), 1)) : r("", true)])) : r("", true)], 2);
-}]]);
-export { T as default };
+  },
+  emits: ["click", "change"],
+  setup(props, { emit }) {
+    const root = ref(null);
+    let container = null;
+    let maxHeight = 0;
+    const ellipsis = ref();
+    const state = reactive({
+      exceeded: false,
+      expanded: false
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    watch(() => props.content, (newV, oldVal) => {
+      if (newV != oldVal) {
+        if (container) {
+          document.body.appendChild(container);
+        }
+        createContainer();
+      }
+    });
+    onMounted(() => {
+      createContainer();
+    });
+    const createContainer = () => {
+      if (!root.value)
+        return;
+      const originStyle = window.getComputedStyle(root.value);
+      container = document.createElement("div");
+      const styleNames = Array.prototype.slice.apply(originStyle);
+      styleNames.forEach((name) => {
+        container.style.setProperty(name, originStyle.getPropertyValue(name));
+      });
+      container.style.position = "fixed";
+      container.style.left = "999999px";
+      container.style.top = "999999px";
+      container.style.zIndex = "-1000";
+      container.style.height = "auto";
+      container.style.minHeight = "auto";
+      container.style.maxHeight = "auto";
+      container.style.textOverflow = "clip";
+      container.style.whiteSpace = "normal";
+      container.style.webkitLineClamp = "unset";
+      container.style.display = "block";
+      const lineHeight = pxToNumber(originStyle.lineHeight);
+      maxHeight = Math.floor(lineHeight * (Number(props.rows) + 0.5) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
+      container.innerText = props.content;
+      document.body.appendChild(container);
+      calcEllipse();
+    };
+    const calcEllipse = () => {
+      if (container.offsetHeight <= maxHeight) {
+        state.exceeded = false;
+      } else {
+        state.exceeded = true;
+        const end = props.content.length;
+        const middle = Math.floor((0 + end) / 2);
+        const ellipsised = props.direction === "middle" ? tailorMiddle([0, middle], [middle, end]) : tailor(0, end);
+        ellipsis.value = ellipsised;
+        document.body.removeChild(container);
+      }
+    };
+    const tailor = (left, right) => {
+      const actionText = state.expanded ? props.collapseText : props.expandText;
+      const end = props.content.length;
+      if (right - left <= 1) {
+        if (props.direction === "end") {
+          return {
+            leading: props.content.slice(0, left) + props.symbol
+          };
+        } else {
+          return {
+            tailing: props.symbol + props.content.slice(right, end)
+          };
+        }
+      }
+      const middle = Math.round((left + right) / 2);
+      if (props.direction === "end") {
+        container.innerText = props.content.slice(0, middle) + props.symbol + actionText;
+      } else {
+        container.innerText = actionText + props.symbol + props.content.slice(middle, end);
+      }
+      if (container.offsetHeight <= maxHeight) {
+        if (props.direction === "end") {
+          return tailor(middle, right);
+        } else {
+          return tailor(left, middle);
+        }
+      } else {
+        if (props.direction === "end") {
+          return tailor(left, middle);
+        } else {
+          return tailor(middle, right);
+        }
+      }
+    };
+    const tailorMiddle = (leftPart, rightPart) => {
+      const actionText = state.expanded ? props.collapseText : props.expandText;
+      const end = props.content.length;
+      if (leftPart[1] - leftPart[0] <= 1 && rightPart[1] - rightPart[0] <= 1) {
+        return {
+          leading: props.content.slice(0, leftPart[0]) + props.symbol,
+          tailing: props.symbol + props.content.slice(rightPart[1], end)
+        };
+      }
+      const leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
+      const rightPartMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
+      container.innerText = props.content.slice(0, leftPartMiddle) + props.symbol + actionText + props.symbol + props.content.slice(rightPartMiddle, end);
+      if (container.offsetHeight <= maxHeight) {
+        return tailorMiddle([leftPartMiddle, leftPart[1]], [rightPart[0], rightPartMiddle]);
+      } else {
+        return tailorMiddle([leftPart[0], leftPartMiddle], [rightPartMiddle, rightPart[1]]);
+      }
+    };
+    const pxToNumber = (value) => {
+      if (!value)
+        return 0;
+      const match = value.match(/^\d*(\.\d*)?/);
+      return match ? Number(match[0]) : 0;
+    };
+    const clickHandle = (type) => {
+      if (type == 1) {
+        state.expanded = true;
+        emit("change", "expand");
+      } else {
+        state.expanded = false;
+        emit("change", "collapse");
+      }
+    };
+    const handleClick = () => {
+      emit("click");
+    };
+    return { ...toRefs(state), root, ellipsis, classes, clickHandle, handleClick };
+  }
+});
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = { key: 1 };
+const _hoisted_3 = { key: 2 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
+    ref: "root"
+  }, [
+    !_ctx.exceeded ? (openBlock(), createElementBlock("view", _hoisted_1, toDisplayString(_ctx.content), 1)) : createCommentVNode("", true),
+    _ctx.exceeded && !_ctx.expanded ? (openBlock(), createElementBlock("view", _hoisted_2, [
+      createTextVNode(toDisplayString(_ctx.ellipsis.leading), 1),
+      _ctx.expandText ? (openBlock(), createElementBlock("span", {
+        key: 0,
+        class: "nut-ellipsis-text",
+        onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.clickHandle(1), ["stop"]))
+      }, toDisplayString(_ctx.expandText), 1)) : createCommentVNode("", true),
+      createTextVNode(toDisplayString(_ctx.ellipsis.tailing), 1)
+    ])) : createCommentVNode("", true),
+    _ctx.exceeded && _ctx.expanded ? (openBlock(), createElementBlock("view", _hoisted_3, [
+      createTextVNode(toDisplayString(_ctx.content) + " ", 1),
+      _ctx.expandText ? (openBlock(), createElementBlock("span", {
+        key: 0,
+        class: "nut-ellipsis-text",
+        onClick: _cache[1] || (_cache[1] = withModifiers(($event) => _ctx.clickHandle(2), ["stop"]))
+      }, toDisplayString(_ctx.collapseText), 1)) : createCommentVNode("", true)
+    ])) : createCommentVNode("", true)
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };