smarteye-e-components 0.0.24 → 0.0.26

package/dist/smarteye-e-components.mjs

@@ -1,118 +1,134 @@
-import { defineComponent as F, computed as M, openBlock as f, createElementBlock as b, renderSlot as y, createElementVNode as _, toDisplayString as O, h as L, inject as te, ref as z, resolveComponent as $, normalizeClass as B, createVNode as I, withCtx as C, createBlock as P, createCommentVNode as j, Fragment as H, renderList as A, provide as oe, pushScopeId as ne, popScopeId as se } from "vue";
-var N;
+import { defineComponent as H, computed as k, openBlock as m, createElementBlock as S, renderSlot as $, createElementVNode as g, toDisplayString as j, h as L, ref as b, normalizeStyle as D, Fragment as E, renderList as F, inject as se, resolveComponent as C, normalizeClass as x, createVNode as O, withCtx as P, createBlock as Y, createCommentVNode as V, provide as le, pushScopeId as ae, popScopeId as ce } from "vue";
+var A;
 ((e) => {
-  ((o) => {
-    function s(a) {
+  ((t) => {
+    function s(l) {
       const i = [];
-      for (let l = 0; l < a; l++)
+      for (let a = 0; a < l; a++)
         i.push({
           id: "testId",
           pid: "",
-          name: `device-${l}`,
-          online: l % 2 == 0,
+          name: `device-${a}`,
+          online: a % 2 == 0,
           channels: []
         });
       return i;
     }
-    function t(a) {
+    function o(l) {
       const i = [];
-      for (let l = 0; l < a; l++)
+      for (let a = 0; a < l; a++)
         i.push({
-          id: `groupid-${l}`,
-          name: `group-${l}`,
+          id: `groupid-${a}`,
+          name: `group-${a}`,
           pid: "",
           onlineCount: 0,
           totalCount: 0,
-          devices: s(10),
-          items: t(a - l - 1)
+          devices: s(4),
+          items: o(l - a - 1)
         });
       return i;
     }
-    function r(a) {
+    function r(l) {
       return {
         name: "hah",
         onlineCount: 0,
         totalCount: 0,
-        items: t(a)
+        items: o(l)
       };
     }
-    o.RandomDeviceGroup = r;
+    t.RandomDeviceGroup = r;
   })(e.Test || (e.Test = {}));
-  function n(o, s) {
-    for (let t = 0; t < o.length; t++)
-      s(o[t]), n(o[t].items, s);
+  function n(t, s) {
+    for (let o = 0; o < t.length; o++)
+      s(t[o]), n(t[o].items, s);
   }
-  ((o) => {
-    function s(t) {
-      const r = {}, a = {};
-      return n(t.items, (i) => {
+  ((t) => {
+    function s(o) {
+      const r = {}, l = {};
+      return n(o.items, (i) => {
         r[i.id] = i;
-        for (let l = 0; l < i.devices.length; l++)
-          a[i.devices[l].id] = i.devices[l];
+        for (let a = 0; a < i.devices.length; a++)
+          l[i.devices[a].id] = i.devices[a];
       }), {
         getGroup(i) {
           return r[i];
         },
         getDevice(i) {
-          return a[i];
+          return l[i];
         },
         foreachGroup(i) {
-          for (let l in r)
-            i(r[l]);
+          for (let a in r)
+            i(r[a]);
         }
       };
     }
-    o.AccessSession = s;
+    t.AccessSession = s;
   })(e.Utils || (e.Utils = {}));
-})(N || (N = {}));
-const re = F({
+})(A || (A = {}));
+const ue = H({
   props: {
     countInfo: Object,
     controlParams: Object
   },
   setup(e) {
-    function n(t, r) {
+    function n(o, r) {
       if (r) {
-        let a = 0;
+        let l = 0;
         return r.items.forEach((i) => {
-          a += n(t, i);
-        }), t(r) + a;
+          l += n(o, i);
+        }), o(r) + l;
       }
       return 0;
     }
-    const o = M(() => n((t) => t.onlineCount, e.countInfo));
+    const t = k(() => n((o) => {
+      var r, l;
+      if (o.devices) {
+        let i = (r = o.devices) == null ? void 0 : r.filter((c) => c.online);
+        const a = (l = e.controlParams) == null ? void 0 : l.searchStr;
+        return a && (i = i.filter((c) => c.name.includes(a) || c.id.includes(a))), i.length;
+      }
+      return 0;
+    }, e.countInfo));
     return {
-      totalCount: M(() => n((t) => t.totalCount, e.countInfo)),
-      onlineCount: o
+      totalCount: k(() => n((o) => {
+        var r;
+        if (o.devices) {
+          let l = o.devices;
+          const i = (r = e.controlParams) == null ? void 0 : r.searchStr;
+          return i && (l = l.filter((a) => a.name.includes(i) || a.id.includes(i))), l.length;
+        }
+        return o.totalCount;
+      }, e.countInfo)),
+      onlineCount: t
     };
   }
 });
-const E = (e, n) => {
-  const o = e.__vccOpts || e;
-  for (const [s, t] of n)
-    o[s] = t;
-  return o;
-}, ie = { class: "root" }, le = { class: "count-show" };
-function ae(e, n, o, s, t, r) {
-  return f(), b("div", ie, [
-    y(e.$slots, "default", {}, void 0, !0),
-    _("span", le, O(e.onlineCount) + "/" + O(e.totalCount), 1)
+const z = (e, n) => {
+  const t = e.__vccOpts || e;
+  for (const [s, o] of n)
+    t[s] = o;
+  return t;
+}, de = { class: "root" }, he = { class: "count-show" };
+function fe(e, n, t, s, o, r) {
+  return m(), S("div", de, [
+    $(e.$slots, "default", {}, void 0, !0),
+    g("span", he, j(e.onlineCount) + "/" + j(e.totalCount), 1)
   ]);
 }
-const q = /* @__PURE__ */ E(re, [["render", ae], ["__scopeId", "data-v-6a3c7483"]]), J = Object.freeze(
+const Z = /* @__PURE__ */ z(ue, [["render", fe], ["__scopeId", "data-v-1962595f"]]), ee = Object.freeze(
   {
     left: 0,
     top: 0,
     width: 16,
     height: 16
   }
-), Q = Object.freeze({
+), te = Object.freeze({
   rotate: 0,
   vFlip: !1,
   hFlip: !1
 }), T = Object.freeze({
-  ...J,
-  ...Q
+  ...ee,
+  ...te
 });
 Object.freeze({
   ...T,
@@ -120,29 +136,29 @@ Object.freeze({
   hidden: !1
 });
 ({
-  ...J
+  ...ee
 });
-const X = Object.freeze({
+const ne = Object.freeze({
   width: null,
   height: null
-}), Y = Object.freeze({
-  ...X,
-  ...Q
+}), oe = Object.freeze({
+  ...ne,
+  ...te
 });
-function ce(e, n) {
-  const o = {
+function pe(e, n) {
+  const t = {
     ...e
   };
   for (const s in n) {
-    const t = n[s], r = typeof t;
-    s in X ? (t === null || t && (r === "string" || r === "number")) && (o[s] = t) : r === typeof o[s] && (o[s] = s === "rotate" ? t % 4 : t);
+    const o = n[s], r = typeof o;
+    s in ne ? (o === null || o && (r === "string" || r === "number")) && (t[s] = o) : r === typeof t[s] && (t[s] = s === "rotate" ? o % 4 : o);
   }
-  return o;
+  return t;
 }
-const ue = /[\s,]+/;
-function de(e, n) {
-  n.split(ue).forEach((o) => {
-    switch (o.trim()) {
+const ve = /[\s,]+/;
+function ge(e, n) {
+  n.split(ve).forEach((t) => {
+    switch (t.trim()) {
       case "horizontal":
         e.hFlip = !0;
         break;
@@ -152,163 +168,163 @@ function de(e, n) {
     }
   });
 }
-function he(e, n = 0) {
-  const o = e.replace(/^-?[0-9.]*/, "");
-  function s(t) {
-    for (; t < 0; )
-      t += 4;
-    return t % 4;
+function me(e, n = 0) {
+  const t = e.replace(/^-?[0-9.]*/, "");
+  function s(o) {
+    for (; o < 0; )
+      o += 4;
+    return o % 4;
   }
-  if (o === "") {
-    const t = parseInt(e);
-    return isNaN(t) ? 0 : s(t);
-  } else if (o !== e) {
-    let t = 0;
-    switch (o) {
+  if (t === "") {
+    const o = parseInt(e);
+    return isNaN(o) ? 0 : s(o);
+  } else if (t !== e) {
+    let o = 0;
+    switch (t) {
       case "%":
-        t = 25;
+        o = 25;
         break;
       case "deg":
-        t = 90;
+        o = 90;
     }
-    if (t) {
-      let r = parseFloat(e.slice(0, e.length - o.length));
-      return isNaN(r) ? 0 : (r = r / t, r % 1 === 0 ? s(r) : 0);
+    if (o) {
+      let r = parseFloat(e.slice(0, e.length - t.length));
+      return isNaN(r) ? 0 : (r = r / o, r % 1 === 0 ? s(r) : 0);
     }
   }
   return n;
 }
-const pe = /(-?[0-9.]*[0-9]+[0-9.]*)/g, fe = /^-?[0-9.]*[0-9]+[0-9.]*$/g;
-function R(e, n, o) {
+const _e = /(-?[0-9.]*[0-9]+[0-9.]*)/g, we = /^-?[0-9.]*[0-9]+[0-9.]*$/g;
+function N(e, n, t) {
   if (n === 1)
     return e;
-  if (o = o || 100, typeof e == "number")
-    return Math.ceil(e * n * o) / o;
+  if (t = t || 100, typeof e == "number")
+    return Math.ceil(e * n * t) / t;
   if (typeof e != "string")
     return e;
-  const s = e.split(pe);
+  const s = e.split(_e);
   if (s === null || !s.length)
     return e;
-  const t = [];
-  let r = s.shift(), a = fe.test(r);
+  const o = [];
+  let r = s.shift(), l = we.test(r);
   for (; ; ) {
-    if (a) {
+    if (l) {
       const i = parseFloat(r);
-      isNaN(i) ? t.push(r) : t.push(Math.ceil(i * n * o) / o);
+      isNaN(i) ? o.push(r) : o.push(Math.ceil(i * n * t) / t);
     } else
-      t.push(r);
+      o.push(r);
     if (r = s.shift(), r === void 0)
-      return t.join("");
-    a = !a;
+      return o.join("");
+    l = !l;
   }
 }
-function ge(e, n) {
-  const o = {
+function Se(e, n) {
+  const t = {
     ...T,
     ...e
   }, s = {
-    ...Y,
+    ...oe,
     ...n
-  }, t = {
-    left: o.left,
-    top: o.top,
-    width: o.width,
-    height: o.height
+  }, o = {
+    left: t.left,
+    top: t.top,
+    width: t.width,
+    height: t.height
   };
-  let r = o.body;
-  [o, s].forEach((g) => {
-    const h = [], p = g.hFlip, c = g.vFlip;
-    let w = g.rotate;
-    p ? c ? w += 2 : (h.push(
-      "translate(" + (t.width + t.left).toString() + " " + (0 - t.top).toString() + ")"
-    ), h.push("scale(-1 1)"), t.top = t.left = 0) : c && (h.push(
-      "translate(" + (0 - t.left).toString() + " " + (t.height + t.top).toString() + ")"
-    ), h.push("scale(1 -1)"), t.top = t.left = 0);
-    let S;
+  let r = t.body;
+  [t, s].forEach((p) => {
+    const f = [], v = p.hFlip, d = p.vFlip;
+    let w = p.rotate;
+    v ? d ? w += 2 : (f.push(
+      "translate(" + (o.width + o.left).toString() + " " + (0 - o.top).toString() + ")"
+    ), f.push("scale(-1 1)"), o.top = o.left = 0) : d && (f.push(
+      "translate(" + (0 - o.left).toString() + " " + (o.height + o.top).toString() + ")"
+    ), f.push("scale(1 -1)"), o.top = o.left = 0);
+    let y;
     switch (w < 0 && (w -= Math.floor(w / 4) * 4), w = w % 4, w) {
       case 1:
-        S = t.height / 2 + t.top, h.unshift(
-          "rotate(90 " + S.toString() + " " + S.toString() + ")"
+        y = o.height / 2 + o.top, f.unshift(
+          "rotate(90 " + y.toString() + " " + y.toString() + ")"
         );
         break;
       case 2:
-        h.unshift(
-          "rotate(180 " + (t.width / 2 + t.left).toString() + " " + (t.height / 2 + t.top).toString() + ")"
+        f.unshift(
+          "rotate(180 " + (o.width / 2 + o.left).toString() + " " + (o.height / 2 + o.top).toString() + ")"
         );
         break;
       case 3:
-        S = t.width / 2 + t.left, h.unshift(
-          "rotate(-90 " + S.toString() + " " + S.toString() + ")"
+        y = o.width / 2 + o.left, f.unshift(
+          "rotate(-90 " + y.toString() + " " + y.toString() + ")"
         );
         break;
     }
-    w % 2 === 1 && (t.left !== t.top && (S = t.left, t.left = t.top, t.top = S), t.width !== t.height && (S = t.width, t.width = t.height, t.height = S)), h.length && (r = '<g transform="' + h.join(" ") + '">' + r + "</g>");
+    w % 2 === 1 && (o.left !== o.top && (y = o.left, o.left = o.top, o.top = y), o.width !== o.height && (y = o.width, o.width = o.height, o.height = y)), f.length && (r = '<g transform="' + f.join(" ") + '">' + r + "</g>");
   });
-  const a = s.width, i = s.height, l = t.width, d = t.height;
-  let v, u;
-  return a === null ? (u = i === null ? "1em" : i === "auto" ? d : i, v = R(u, l / d)) : (v = a === "auto" ? l : a, u = i === null ? R(v, d / l) : i === "auto" ? d : i), {
+  const l = s.width, i = s.height, a = o.width, c = o.height;
+  let h, u;
+  return l === null ? (u = i === null ? "1em" : i === "auto" ? c : i, h = N(u, a / c)) : (h = l === "auto" ? a : l, u = i === null ? N(h, c / a) : i === "auto" ? c : i), {
     attributes: {
-      width: v.toString(),
+      width: h.toString(),
       height: u.toString(),
-      viewBox: t.left.toString() + " " + t.top.toString() + " " + l.toString() + " " + d.toString()
+      viewBox: o.left.toString() + " " + o.top.toString() + " " + a.toString() + " " + c.toString()
     },
     body: r
   };
 }
-const ve = /\sid="(\S+)"/g, me = "IconifyId" + Date.now().toString(16) + (Math.random() * 16777216 | 0).toString(16);
-let we = 0;
-function _e(e, n = me) {
-  const o = [];
+const ye = /\sid="(\S+)"/g, be = "IconifyId" + Date.now().toString(16) + (Math.random() * 16777216 | 0).toString(16);
+let $e = 0;
+function Pe(e, n = be) {
+  const t = [];
   let s;
-  for (; s = ve.exec(e); )
-    o.push(s[1]);
-  return o.length && o.forEach((t) => {
-    const r = typeof n == "function" ? n(t) : n + (we++).toString(), a = t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  for (; s = ye.exec(e); )
+    t.push(s[1]);
+  return t.length && t.forEach((o) => {
+    const r = typeof n == "function" ? n(o) : n + ($e++).toString(), l = o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
     e = e.replace(
-      new RegExp('([#;"])(' + a + ')([")]|\\.[a-z])', "g"),
+      new RegExp('([#;"])(' + l + ')([")]|\\.[a-z])', "g"),
       "$1" + r + "$3"
     );
   }), e;
 }
-function Se(e, n) {
-  let o = e.indexOf("xlink:") === -1 ? "" : ' xmlns:xlink="http://www.w3.org/1999/xlink"';
+function Oe(e, n) {
+  let t = e.indexOf("xlink:") === -1 ? "" : ' xmlns:xlink="http://www.w3.org/1999/xlink"';
   for (const s in n)
-    o += " " + s + '="' + n[s] + '"';
-  return '<svg xmlns="http://www.w3.org/2000/svg"' + o + ">" + e + "</svg>";
+    t += " " + s + '="' + n[s] + '"';
+  return '<svg xmlns="http://www.w3.org/2000/svg"' + t + ">" + e + "</svg>";
 }
-function be(e) {
+function Ce(e) {
   return e.replace(/"/g, "'").replace(/%/g, "%25").replace(/#/g, "%23").replace(/</g, "%3C").replace(/>/g, "%3E").replace(/\s+/g, " ");
 }
-function ye(e) {
-  return 'url("data:image/svg+xml,' + be(e) + '")';
+function ke(e) {
+  return 'url("data:image/svg+xml,' + Ce(e) + '")';
 }
-const V = {
-  ...Y,
+const R = {
+  ...oe,
   inline: !1
-}, Ce = {
+}, Ie = {
   xmlns: "http://www.w3.org/2000/svg",
   "xmlns:xlink": "http://www.w3.org/1999/xlink",
   "aria-hidden": !0,
   role: "img"
-}, $e = {
+}, De = {
   display: "inline-block"
-}, D = {
+}, M = {
   backgroundColor: "currentColor"
-}, Z = {
+}, ie = {
   backgroundColor: "transparent"
-}, x = {
+}, B = {
   Image: "var(--svg)",
   Repeat: "no-repeat",
   Size: "100% 100%"
 }, U = {
-  webkitMask: D,
-  mask: D,
-  background: Z
+  webkitMask: M,
+  mask: M,
+  background: ie
 };
 for (const e in U) {
   const n = U[e];
-  for (const o in x)
-    n[e + o] = x[o];
+  for (const t in B)
+    n[e + t] = B[t];
 }
 const G = {};
 ["horizontal", "vertical"].forEach((e) => {
@@ -318,12 +334,12 @@ const G = {};
 function W(e) {
   return e + (e.match(/^[-0-9.]+$/) ? "px" : "");
 }
-const ke = (e, n) => {
-  const o = ce(V, n), s = { ...Ce }, t = n.mode || "svg", r = {}, a = n.style, i = typeof a == "object" && !(a instanceof Array) ? a : {};
-  for (let p in n) {
-    const c = n[p];
-    if (c !== void 0)
-      switch (p) {
+const Ge = (e, n) => {
+  const t = pe(R, n), s = { ...Ie }, o = n.mode || "svg", r = {}, l = n.style, i = typeof l == "object" && !(l instanceof Array) ? l : {};
+  for (let v in n) {
+    const d = n[v];
+    if (d !== void 0)
+      switch (v) {
         case "icon":
         case "style":
         case "onLoad":
@@ -332,67 +348,161 @@ const ke = (e, n) => {
         case "inline":
         case "hFlip":
         case "vFlip":
-          o[p] = c === !0 || c === "true" || c === 1;
+          t[v] = d === !0 || d === "true" || d === 1;
           break;
         case "flip":
-          typeof c == "string" && de(o, c);
+          typeof d == "string" && ge(t, d);
           break;
         case "color":
-          r.color = c;
+          r.color = d;
           break;
         case "rotate":
-          typeof c == "string" ? o[p] = he(c) : typeof c == "number" && (o[p] = c);
+          typeof d == "string" ? t[v] = me(d) : typeof d == "number" && (t[v] = d);
           break;
         case "ariaHidden":
         case "aria-hidden":
-          c !== !0 && c !== "true" && delete s["aria-hidden"];
+          d !== !0 && d !== "true" && delete s["aria-hidden"];
           break;
         default: {
-          const w = G[p];
-          w ? (c === !0 || c === "true" || c === 1) && (o[w] = !0) : V[p] === void 0 && (s[p] = c);
+          const w = G[v];
+          w ? (d === !0 || d === "true" || d === 1) && (t[w] = !0) : R[v] === void 0 && (s[v] = d);
         }
       }
   }
-  const l = ge(e, o), d = l.attributes;
-  if (o.inline && (r.verticalAlign = "-0.125em"), t === "svg") {
+  const a = Se(e, t), c = a.attributes;
+  if (t.inline && (r.verticalAlign = "-0.125em"), o === "svg") {
     s.style = {
       ...r,
       ...i
-    }, Object.assign(s, d);
-    let p = 0, c = n.id;
-    return typeof c == "string" && (c = c.replace(/-/g, "_")), s.innerHTML = _e(l.body, c ? () => c + "ID" + p++ : "iconifyVue"), L("svg", s);
+    }, Object.assign(s, c);
+    let v = 0, d = n.id;
+    return typeof d == "string" && (d = d.replace(/-/g, "_")), s.innerHTML = Pe(a.body, d ? () => d + "ID" + v++ : "iconifyVue"), L("svg", s);
   }
-  const { body: v, width: u, height: m } = e, g = t === "mask" || (t === "bg" ? !1 : v.indexOf("currentColor") !== -1), h = Se(v, {
-    ...d,
+  const { body: h, width: u, height: _ } = e, p = o === "mask" || (o === "bg" ? !1 : h.indexOf("currentColor") !== -1), f = Oe(h, {
+    ...c,
     width: u + "",
-    height: m + ""
+    height: _ + ""
   });
   return s.style = {
     ...r,
-    "--svg": ye(h),
-    width: W(d.width),
-    height: W(d.height),
-    ...$e,
-    ...g ? D : Z,
+    "--svg": ke(f),
+    width: W(c.width),
+    height: W(c.height),
+    ...De,
+    ...p ? M : ie,
     ...i
   }, L("span", s);
-}, ee = /* @__PURE__ */ Object.create(null);
-function k(e, n) {
-  ee[e] = n;
+}, re = /* @__PURE__ */ Object.create(null);
+function I(e, n) {
+  re[e] = n;
 }
-const Ie = F({
+const je = H({
   inheritAttrs: !1,
   render() {
-    const e = this.$attrs, n = e.icon, o = typeof n == "string" ? ee[n] : typeof n == "object" ? n : null;
-    return o === null || typeof o != "object" || typeof o.body != "string" ? this.$slots.default ? this.$slots.default() : null : ke({
+    const e = this.$attrs, n = e.icon, t = typeof n == "string" ? re[n] : typeof n == "object" ? n : null;
+    return t === null || typeof t != "object" || typeof t.body != "string" ? this.$slots.default ? this.$slots.default() : null : Ge({
       ...T,
-      ...o
+      ...t
+    }, e);
+  }
+});
+var He = Object.defineProperty, K = Object.getOwnPropertySymbols, ze = Object.prototype.hasOwnProperty, Me = Object.prototype.propertyIsEnumerable, q = (e, n, t) => n in e ? He(e, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[n] = t, Ee = (e, n) => {
+  for (var t in n || (n = {}))
+    ze.call(n, t) && q(e, t, n[t]);
+  if (K)
+    for (var t of K(n))
+      Me.call(n, t) && q(e, t, n[t]);
+  return e;
+};
+const Fe = {
+  name: "VirtualList",
+  props: {
+    listData: {
+      type: Object,
+      default: () => []
+    },
+    itemSize: {
+      type: Number,
+      default: 200
+    }
+  },
+  computed: {
+    listHeight() {
+      return this.listData.length * this.itemSize;
+    },
+    visibleCount() {
+      return Math.ceil(this.screenHeight / this.itemSize);
+    },
+    getTransform() {
+      return `translate3d(0,${this.startOffset}px,0)`;
+    },
+    visibleData() {
+      return this.listData.slice(this.start, Math.min(this.end, this.listData.length));
+    }
+  },
+  setup() {
+    const e = {
+      screenHeight: b(0),
+      startOffset: b(0),
+      start: b(0),
+      end: b(0)
+    }, n = b();
+    return Ee({
+      virList: n
     }, e);
+  },
+  mounted() {
+    this.screenHeight = this.$el.clientHeight, this.screenHeight == 0 && (this.screenHeight = 400), this.start = 0, this.end = this.start + this.visibleCount;
+  },
+  methods: {
+    scrollEvent() {
+      if (this.virList) {
+        let e = this.virList.scrollTop;
+        this.start = Math.floor(e / this.itemSize), this.end = this.start + this.visibleCount, this.startOffset = e - e % this.itemSize;
+      }
+    }
   }
-}), Pe = F({
+};
+function Te(e, n, t, s, o, r) {
+  return m(), S("div", {
+    ref: "virList",
+    class: "infinite-list-container",
+    onScroll: n[0] || (n[0] = (l) => r.scrollEvent())
+  }, [
+    g("div", {
+      class: "infinite-list-phantom",
+      style: D({ height: r.listHeight + "px" })
+    }, null, 4),
+    g("div", {
+      class: "infinite-list",
+      style: D({ transform: r.getTransform })
+    }, [
+      (m(!0), S(E, null, F(r.visibleData, (l) => (m(), S("div", {
+        ref_for: !0,
+        ref: "items",
+        class: "infinite-list-item",
+        key: l.id,
+        style: D({ height: t.itemSize + "px", lineHeight: t.itemSize + "px" })
+      }, [
+        $(e.$slots, "default", { data: l }, void 0, !0)
+      ], 4))), 128))
+    ], 4)
+  ], 544);
+}
+const Le = /* @__PURE__ */ z(Fe, [["render", Te], ["__scopeId", "data-v-67c5afcc"]]);
+var xe = Object.defineProperty, Ve = Object.defineProperties, Ae = Object.getOwnPropertyDescriptors, J = Object.getOwnPropertySymbols, Ne = Object.prototype.hasOwnProperty, Re = Object.prototype.propertyIsEnumerable, Q = (e, n, t) => n in e ? xe(e, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[n] = t, Be = (e, n) => {
+  for (var t in n || (n = {}))
+    Ne.call(n, t) && Q(e, t, n[t]);
+  if (J)
+    for (var t of J(n))
+      Re.call(n, t) && Q(e, t, n[t]);
+  return e;
+}, Ue = (e, n) => Ve(e, Ae(n));
+const We = H({
   components: {
-    CountShow: q,
-    Icon: Ie
+    VirtualList: Le,
+    CountShow: Z,
+    Icon: je
   },
   name: "group-show",
   props: {
@@ -400,159 +510,173 @@ const Ie = F({
     controlParams: Object
   },
   setup(e) {
-    const n = te("theme");
-    function o(r) {
-      var a;
-      return ((a = r && r.filter((i) => {
-        var l;
-        return !((l = e.controlParams) != null && l.onlyShowOnline) || i.online;
-      })) == null ? void 0 : a.filter((i) => {
-        var l, d;
-        return e.controlParams ? i.name.indexOf((l = e.controlParams) == null ? void 0 : l.searchStr) >= 0 || i.id.indexOf((d = e.controlParams) == null ? void 0 : d.searchStr) >= 0 : !0;
-      })) || [];
-    }
-    const s = M(() => {
-      var r, a;
-      const i = e.controlParams.searchStr;
-      return i.length == 0 || e.deviceGroup && ((r = e.deviceGroup) == null ? void 0 : r.name.indexOf(i)) > 0 ? !0 : (a = e.deviceGroup) == null ? void 0 : a.devices.find((l) => l.name.indexOf(e.controlParams.searchStr) >= 0 || l.id.indexOf(e.controlParams.searchStr) >= 0);
-    }), t = z(!1);
-    return {
-      showGroup: s,
-      FilterDevice: o,
-      bShow: t,
+    const n = se("theme"), t = {
+      filterDevice(i) {
+        var a, c, h, u;
+        let _ = !0;
+        (a = e.controlParams) != null && a.searchStr && (_ = i.name.indexOf((c = e.controlParams) == null ? void 0 : c.searchStr) >= 0 || i.id.indexOf((h = e.controlParams) == null ? void 0 : h.searchStr) >= 0);
+        let p = !0;
+        return (u = e.controlParams) != null && u.onlyShowOnline && (p = i.online), _ && p;
+      },
+      deviceText(i) {
+        return i.name.length > 0 ? i.name : i.id;
+      }
+    }, s = {
+      filteredDevices: k(() => {
+        var i;
+        const a = (i = e.deviceGroup) == null ? void 0 : i.devices, c = a && a.filter((u) => t.filterDevice(u)) || [];
+        return c.filter((u) => u.online).concat(c.filter((u) => !u.online));
+      })
+    }, o = k(() => s.filteredDevices.value.length > 10 ? "400px" : `${s.filteredDevices.value.length * 40}px`), r = k(() => {
+      var i, a;
+      const c = e.controlParams.searchStr;
+      return c.length == 0 || e.deviceGroup && ((i = e.deviceGroup) == null ? void 0 : i.name.indexOf(c)) > 0 ? !0 : (a = e.deviceGroup) == null ? void 0 : a.devices.find((h) => h.name.indexOf(e.controlParams.searchStr) >= 0 || h.id.indexOf(e.controlParams.searchStr) >= 0);
+    }), l = b(!1);
+    return Ue(Be({
+      innerUtils: t
+    }, s), {
+      devicePanelHeight: o,
+      showGroup: r,
+      bShow: l,
       theme: n
-    };
+    });
   }
 });
-const Ge = {
+const Ke = {
   key: 0,
   class: "head-op"
-}, Oe = ["title"], Fe = { class: "group-slot" }, je = {
+}, qe = {
+  key: 1,
+  style: { display: "inline-block", width: "25px" }
+}, Je = ["title"], Qe = { class: "group-slot" }, Xe = {
   key: 0,
   style: { "margin-left": "26px" }
-}, Me = { class: "device-show-div" }, ze = ["title"], He = { class: "device-slot" };
-function Ae(e, n, o, s, t, r) {
-  var a, i;
-  const l = $("Icon"), d = $("CountShow"), v = $("group-show");
-  return e.showGroup ? (f(), b("div", {
+}, Ye = ["title"], Ze = { class: "device-slot" };
+function et(e, n, t, s, o, r) {
+  var l;
+  const i = C("Icon"), a = C("CountShow"), c = C("group-show"), h = C("VirtualList");
+  return e.showGroup ? (m(), S("div", {
     key: 0,
-    class: B("group " + e.theme)
+    class: x("group " + e.theme)
   }, [
-    I(d, {
+    O(a, {
       countInfo: e.deviceGroup,
       controlParams: e.controlParams
     }, {
-      default: C(() => {
-        var u, m, g, h, p;
+      default: P(() => {
+        var u, _, p, f, v;
         return [
-          e.deviceGroup && e.deviceGroup.devices.length + e.deviceGroup.items.length > 0 ? (f(), b("span", Ge, [
-            e.bShow ? (f(), P(l, {
-              key: 1,
-              icon: "minus",
+          e.deviceGroup && e.deviceGroup.devices.length + e.deviceGroup.items.length > 0 ? (m(), S("span", Ke, [
+            O(i, {
+              icon: e.bShow ? "minus" : "plus",
               width: "20",
-              onClick: n[1] || (n[1] = (c) => e.bShow = !e.bShow),
+              onClick: n[0] || (n[0] = (d) => e.bShow = !e.bShow),
               class: "handle-ls-svg"
-            })) : (f(), P(l, {
-              key: 0,
-              icon: "plus",
-              width: "20",
-              onClick: n[0] || (n[0] = (c) => e.bShow = !e.bShow),
-              class: "handle-ls-svg"
-            }))
-          ])) : j("", !0),
-          _("span", {
+            }, null, 8, ["icon"])
+          ])) : (m(), S("span", qe)),
+          g("span", {
             class: "group-head-db-click",
-            onDblclick: n[2] || (n[2] = (c) => e.bShow = !e.bShow)
+            onDblclick: n[1] || (n[1] = (d) => e.bShow = !e.bShow)
           }, [
-            I(l, {
+            O(i, {
               icon: "group",
               width: "24",
               class: "group-avatar"
             }),
-            _("span", {
+            g("span", {
               class: "group-name",
               title: (u = e.deviceGroup) == null ? void 0 : u.name
-            }, O(((m = e.deviceGroup) == null ? void 0 : m.name) && ((g = e.deviceGroup) == null ? void 0 : g.name.length) > 0 ? (h = e.deviceGroup) == null ? void 0 : h.name : (p = e.deviceGroup) == null ? void 0 : p.id), 9, Oe)
+            }, j(((_ = e.deviceGroup) == null ? void 0 : _.name) && ((p = e.deviceGroup) == null ? void 0 : p.name.length) > 0 ? (f = e.deviceGroup) == null ? void 0 : f.name : (v = e.deviceGroup) == null ? void 0 : v.id), 9, Je)
           ], 32),
-          _("div", Fe, [
-            y(e.$slots, "group", { group: e.deviceGroup }, void 0, !0)
+          g("div", Qe, [
+            $(e.$slots, "group", { group: e.deviceGroup }, void 0, !0)
           ])
         ];
       }),
       _: 3
     }, 8, ["countInfo", "controlParams"]),
-    e.bShow ? (f(), b("div", je, [
-      (f(!0), b(H, null, A((a = e.deviceGroup) == null ? void 0 : a.items, (u, m) => (f(), P(v, {
-        key: m,
+    e.bShow ? (m(), S("div", Xe, [
+      (m(!0), S(E, null, F((l = e.deviceGroup) == null ? void 0 : l.items, (u, _) => (m(), Y(c, {
+        key: _,
         deviceGroup: u,
         controlParams: e.controlParams
       }, {
-        group: C(({ group: g }) => [
-          y(e.$slots, "group", { group: g }, void 0, !0)
+        group: P(({ group: p }) => [
+          $(e.$slots, "group", { group: p }, void 0, !0)
         ]),
-        device: C(({ device: g, group: h }) => [
-          y(e.$slots, "device", {
-            device: g,
-            group: h
+        device: P(({ device: p, group: f }) => [
+          $(e.$slots, "device", {
+            device: p,
+            group: f
           }, void 0, !0)
         ]),
         _: 2
       }, 1032, ["deviceGroup", "controlParams"]))), 128)),
-      _("div", Me, [
-        (f(!0), b(H, null, A(e.FilterDevice((i = e.deviceGroup) == null ? void 0 : i.devices), (u, m) => (f(), b("div", {
-          key: m,
-          class: B(["device", u.online && "online-device"])
-        }, [
-          I(l, {
-            icon: "user",
-            width: "16",
-            class: "device-avatar"
-          }),
-          _("span", {
-            title: u.id,
-            class: "device-name"
-          }, O(u.name.length > 0 ? u.name : u.id), 9, ze),
-          _("div", He, [
-            y(e.$slots, "device", {
-              device: u,
-              group: e.deviceGroup
-            }, void 0, !0)
-          ])
-        ], 2))), 128))
-      ])
-    ])) : j("", !0)
-  ], 2)) : j("", !0);
+      g("div", {
+        class: "device-show-div",
+        style: D(`height: ${e.filteredDevices.length > 10 ? "400px" : `${e.filteredDevices.length * 40}px`}`)
+      }, [
+        O(h, {
+          "list-data": e.filteredDevices,
+          "item-size": 40
+        }, {
+          default: P(({ data: u }) => [
+            g("div", {
+              class: x(u.online && "online-device")
+            }, [
+              O(i, {
+                icon: "user",
+                width: "16",
+                class: "device-avatar"
+              }),
+              g("span", {
+                title: u.id,
+                class: "device-name"
+              }, j(e.innerUtils.deviceText(u)), 9, Ye),
+              g("div", Ze, [
+                $(e.$slots, "device", {
+                  device: u,
+                  group: e.deviceGroup
+                }, void 0, !0)
+              ])
+            ], 2)
+          ]),
+          _: 3
+        }, 8, ["list-data"])
+      ], 4)
+    ])) : V("", !0)
+  ], 2)) : V("", !0);
 }
-const De = /* @__PURE__ */ E(Pe, [["render", Ae], ["__scopeId", "data-v-100c06ff"]]), Ee = {
+const tt = /* @__PURE__ */ z(We, [["render", et], ["__scopeId", "data-v-ec49c748"]]), nt = {
   width: 1024,
   height: 1024,
   body: '<path fill="currentColor" d="M384 192v640l384-320.064z"/>'
-}, Te = {
+}, ot = {
   width: 1024,
   height: 1024,
   body: '<path fill="currentColor" d="M878.08 448H241.92l-96 384h636.16l96-384zM832 384v-64H485.76L357.504 192H128v448l57.92-231.744A32 32 0 0 1 216.96 384H832zm-24.96 512H96a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h287.872l128.384 128H864a32 32 0 0 1 32 32v96h23.04a32 32 0 0 1 31.04 39.744l-112 448A32 32 0 0 1 807.04 896z"/>'
-}, Le = {
+}, it = {
   width: 1024,
   height: 1024,
   body: '<path fill="currentColor" d="M628.736 528.896A416 416 0 0 1 928 928H96a415.872 415.872 0 0 1 299.264-399.104L512 704l116.736-175.104zM720 304a208 208 0 1 1-416 0a208 208 0 0 1 416 0z"/>'
-}, Be = {
+}, rt = {
   width: 1024,
   height: 1024,
   body: '<path fill="currentColor" d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64h352z"/>'
-}, Ne = {
+}, st = {
   width: 1024,
   height: 1024,
   body: '<path fill="currentColor" d="M128 544h768a32 32 0 1 0 0-64H128a32 32 0 0 0 0 64z"/>'
 };
-k("right", Ee);
-k("group", Te);
-k("user", Le);
-k("plus", Be);
-k("minus", Ne);
-const Re = F({
+I("right", nt);
+I("group", ot);
+I("user", it);
+I("plus", rt);
+I("minus", st);
+const lt = H({
   components: {
-    CountShow: q,
-    GroupShow: De
+    CountShow: Z,
+    GroupShow: tt
   },
   props: {
     deviceGroup: Object,
@@ -574,49 +698,49 @@ const Re = F({
     }
   },
   setup(e) {
-    oe("theme", e.theme);
-    const n = z({
+    le("theme", e.theme);
+    const n = b({
       onlyShowOnline: !1,
       searchStr: ""
     });
     return {
-      inputSearchRef: z(),
+      inputSearchRef: b(),
       controlParams: n
     };
   }
 });
-const Ve = (e) => (ne("data-v-7e0a8034"), e = e(), se(), e), xe = { class: "device-group-list" }, Ue = { class: "search-panel" }, We = /* @__PURE__ */ Ve(() => /* @__PURE__ */ _("label", { for: "onlineShow" }, "\u53EA\u663E\u793A\u5728\u7EBF\u8BBE\u5907", -1)), Ke = { class: "device-panel" };
-function qe(e, n, o, s, t, r) {
-  var a;
-  const i = $("CountShow"), l = $("group-show");
-  return f(), b("div", xe, [
-    _("div", Ue, [
-      I(i, { countInfo: e.deviceGroup }, {
-        default: C(() => [
-          _("input", {
+const at = (e) => (ae("data-v-7e0a8034"), e = e(), ce(), e), ct = { class: "device-group-list" }, ut = { class: "search-panel" }, dt = /* @__PURE__ */ at(() => /* @__PURE__ */ g("label", { for: "onlineShow" }, "\u53EA\u663E\u793A\u5728\u7EBF\u8BBE\u5907", -1)), ht = { class: "device-panel" };
+function ft(e, n, t, s, o, r) {
+  var l;
+  const i = C("CountShow"), a = C("group-show");
+  return m(), S("div", ct, [
+    g("div", ut, [
+      O(i, { countInfo: e.deviceGroup }, {
+        default: P(() => [
+          g("input", {
             type: "checkbox",
             id: "onlineShow",
             value: "onlineShow",
-            onChange: n[0] || (n[0] = (...d) => e.onCheckBoxChange && e.onCheckBoxChange(...d))
+            onChange: n[0] || (n[0] = (...c) => e.onCheckBoxChange && e.onCheckBoxChange(...c))
           }, null, 32),
-          We
+          dt
         ]),
         _: 1
       }, 8, ["countInfo"])
     ]),
-    _("div", Ke, [
-      (f(!0), b(H, null, A((a = e.deviceGroup) == null ? void 0 : a.items, (d, v) => (f(), P(l, {
+    g("div", ht, [
+      (m(!0), S(E, null, F((l = e.deviceGroup) == null ? void 0 : l.items, (c, h) => (m(), Y(a, {
         controlParams: e.controlParams,
-        key: v,
-        deviceGroup: d
+        key: h,
+        deviceGroup: c
       }, {
-        group: C(({ group: u }) => [
-          y(e.$slots, "group", { group: u }, void 0, !0)
+        group: P(({ group: u }) => [
+          $(e.$slots, "group", { group: u }, void 0, !0)
         ]),
-        device: C(({ device: u, group: m }) => [
-          y(e.$slots, "device", {
+        device: P(({ device: u, group: _ }) => [
+          $(e.$slots, "device", {
             device: u,
-            group: m
+            group: _
           }, void 0, !0)
         ]),
         _: 2
@@ -624,18 +748,18 @@ function qe(e, n, o, s, t, r) {
     ])
   ]);
 }
-const Je = /* @__PURE__ */ E(Re, [["render", qe], ["__scopeId", "data-v-7e0a8034"]]), K = {
-  RecursionDeviceGroup: Je
-}, Xe = {
+const pt = /* @__PURE__ */ z(lt, [["render", ft], ["__scopeId", "data-v-7e0a8034"]]), X = {
+  RecursionDeviceGroup: pt
+}, gt = {
   install(e) {
-    for (const n in K) {
-      const o = K[n];
-      e.component(n, o);
+    for (const n in X) {
+      const t = X[n];
+      e.component(n, t);
     }
   }
 };
 export {
-  N as RecursionDeviceGroup,
-  Xe as default
+  A as RecursionDeviceGroup,
+  gt as default
 };
 //# sourceMappingURL=smarteye-e-components.mjs.map