abl-ui 0.4.2 → 0.4.4

package/lib/abl-ui.es.js

@@ -1,4 +1,4 @@
-import { openBlock as r, createElementBlock as u, normalizeStyle as R, renderSlot as A, createElementVNode as c, normalizeClass as L, createTextVNode as K, toDisplayString as T, createCommentVNode as z, createStaticVNode as Bt, Fragment as Y, renderList as ne, createVNode as ue, useSlots as Pe, ref as _, provide as ye, onMounted as xe, watch as ce, withDirectives as X, vShow as Q, defineComponent as Vt, toRefs as De, computed as M, inject as Ce, reactive as Re, unref as te, createBlock as oe, Transition as ve, withCtx as se, render as lt, getCurrentInstance as st, onBeforeUnmount as Ye, onUpdated as it, onBeforeMount as Lt, Teleport as Ke, pushScopeId as $e, popScopeId as ke, withModifiers as U, watchEffect as Je, resolveDynamicComponent as zt, mergeProps as Be, nextTick as be, useAttrs as tl, onUnmounted as It, resolveDirective as ll, createSlots as al, vModelDynamic as nl, normalizeProps as mt, guardReactiveProps as ol, withKeys as At, vModelText as Rt, toRaw as ht } from "vue";
+import { openBlock as r, createElementBlock as u, normalizeStyle as N, renderSlot as A, createElementVNode as c, normalizeClass as L, createTextVNode as K, toDisplayString as T, createCommentVNode as z, createStaticVNode as Bt, Fragment as Y, renderList as ne, createVNode as ue, useSlots as Pe, ref as _, provide as ye, onMounted as xe, watch as ce, withDirectives as X, vShow as Q, defineComponent as Vt, toRefs as De, computed as M, inject as Ce, reactive as Re, unref as te, createBlock as oe, Transition as ve, withCtx as se, render as lt, getCurrentInstance as st, onBeforeUnmount as Ye, onUpdated as it, onBeforeMount as Lt, Teleport as Ke, pushScopeId as $e, popScopeId as ke, withModifiers as U, watchEffect as Je, resolveDynamicComponent as zt, mergeProps as Be, nextTick as be, useAttrs as tl, onUnmounted as It, resolveDirective as ll, createSlots as al, vModelDynamic as nl, normalizeProps as mt, guardReactiveProps as ol, withKeys as At, vModelText as Rt, toRaw as ht } from "vue";
 const G = (e, l) => {
   const t = e.__vccOpts || e;
   for (const [a, n] of l)
@@ -30,20 +30,20 @@ const G = (e, l) => {
       e.image === "1" ? (r(), u("svg", {
         key: 0,
         class: "abl-u-empty-1",
-        style: R(e.imageStyle),
+        style: N(e.imageStyle),
         viewBox: "0 0 184 152",
         xmlns: "http://www.w3.org/2000/svg"
       }, cl, 4)) : e.image === "2" ? (r(), u("svg", {
         key: 1,
         class: "abl-u-empty-2",
-        style: R(e.imageStyle),
+        style: N(e.imageStyle),
         viewBox: "0 0 64 41",
         xmlns: "http://www.w3.org/2000/svg"
       }, ul, 4)) : A(l.$slots, "default", { key: 2 }, () => [
         c("img", {
           class: "abl-u-empty",
           src: e.image,
-          style: R(e.imageStyle),
+          style: N(e.imageStyle),
           alt: "image"
         }, null, 12, dl)
       ], !0),
@@ -107,7 +107,7 @@ const pl = { class: "abl-table" }, vl = { class: "gridtable" }, ml = { class: "t
                 }, [
                   c("div", {
                     class: "cell",
-                    style: R({ "text-align": i.align || "left", width: i.width || "auto" })
+                    style: N({ "text-align": i.align || "left", width: i.width || "auto" })
                   }, T(i.title), 5)
                 ], 2))), 128))
               ])
@@ -120,7 +120,7 @@ const pl = { class: "abl-table" }, vl = { class: "gridtable" }, ml = { class: "t
                 }, [
                   c("div", {
                     class: "cell",
-                    style: R({ "text-align": p.align || "left", width: p.width || "auto" })
+                    style: N({ "text-align": p.align || "left", width: p.width || "auto" })
                   }, T(i[p.prop]), 5)
                 ], 2))), 128))
               ]))), 128))
@@ -270,16 +270,16 @@ const xl = { class: "abl-tabs" }, $l = {
           (C = o.value) != null && C.width ? (r(), u("div", {
             key: 0,
             class: "bottom-line",
-            style: R(o.value)
+            style: N(o.value)
           }, [
             c("div", {
               class: "bottom-line-inner",
-              style: R({ "background-color": n.color })
+              style: N({ "background-color": n.color })
             }, null, 4),
             e.arrow ? (r(), u("div", Cl, [
               c("i", {
                 class: "iconfont-abl icon-abl-top",
-                style: R({ color: n.color })
+                style: N({ color: n.color })
               }, null, 4)
             ])) : z("", !0)
           ], 4)) : z("", !0),
@@ -350,11 +350,11 @@ const xl = { class: "abl-tabs" }, $l = {
     return (d, p) => (r(), u("div", {
       class: L(["abl-switch", i.value]),
       onClick: n,
-      style: R({ background: t.modelValue == t.activeValue ? e.activeColor : e.inactiveColor })
+      style: N({ background: t.modelValue == t.activeValue ? e.activeColor : e.inactiveColor })
     }, [
       c("span", {
         class: "abl-switch__core",
-        style: R({ background: t.coreColor })
+        style: N({ background: t.coreColor })
       }, null, 4)
     ], 6));
   }
@@ -548,7 +548,7 @@ const El = { class: "message-text" }, Tl = {
         t.value ? (r(), u("div", {
           key: 0,
           class: "abl-message",
-          style: R(n[l.type])
+          style: N(n[l.type])
         }, [
           c("div", El, [
             c("i", {
@@ -686,7 +686,7 @@ const Fl = (e) => ($e("data-v-6c927dff"), e = e(), ke(), e), Hl = { class: "abl-
             key: 0,
             class: "abl-drawer-mask",
             onClick: h,
-            style: R(`z-index: ${o.zIndex}`)
+            style: N(`z-index: ${o.zIndex}`)
           }, null, 4)) : z("", !0)
         ]),
         _: 1
@@ -699,11 +699,11 @@ const Fl = (e) => ($e("data-v-6c927dff"), e = e(), ke(), e), Hl = { class: "abl-
           e.modelValue ? (r(), u("div", {
             key: 0,
             class: L(["abl-drawer", e.customClass, `abl-drawer-${o.direction}`, e.round && "abl-drawer-round", o.class]),
-            style: R(`z-index: ${o.zIndex + 1}`)
+            style: N(`z-index: ${o.zIndex + 1}`)
           }, [
             c("div", {
               class: "abl-drawer-content-wrapper",
-              style: R(d.value)
+              style: N(d.value)
             }, [
               c("div", Hl, [
                 c("div", jl, [
@@ -725,7 +725,7 @@ const Fl = (e) => ($e("data-v-6c927dff"), e = e(), ke(), e), Hl = { class: "abl-
                   v.$slots.footer ? (r(), u("div", {
                     key: 1,
                     class: "abl-drawer-footer",
-                    style: R(e.footerStyle)
+                    style: N(e.footerStyle)
                   }, [
                     A(v.$slots, "footer", {}, void 0, !0)
                   ], 4)) : z("", !0)
@@ -1013,13 +1013,13 @@ const oa = { class: "abl-dialog__header" }, sa = { class: "abl-dialog__title" },
             key: 0,
             class: L(["abl-dialog-overlay", h.value, a.class]),
             onClick: p,
-            style: R({ zIndex: e.zIndex })
+            style: N({ zIndex: e.zIndex })
           }, [
             c("div", {
               class: L(["abl-dialog", e.customClass, h.value]),
               onClick: v[0] || (v[0] = U(() => {
               }, ["stop"])),
-              style: R({ width: e.width, zIndex: e.zIndex + 1 }),
+              style: N({ width: e.width, zIndex: e.zIndex + 1 }),
               onTouchmove: v[1] || (v[1] = U(() => {
               }, ["prevent"]))
             }, [
@@ -1319,14 +1319,14 @@ const ya = (e) => ({
     }, g = ut(n), m = rt(g), x = await s.getDimensions(p), k = g === "y", b = k ? "top" : "left", y = k ? "bottom" : "right", V = k ? "clientHeight" : "clientWidth", C = o.reference[m] + o.reference[g] - v[g] - o.floating[m], S = v[g] - o.reference[g], w = await (s.getOffsetParent == null ? void 0 : s.getOffsetParent(p));
     let $ = w ? w[V] : 0;
     (!$ || !await (s.isElement == null ? void 0 : s.isElement(w))) && ($ = i.floating[V] || o.floating[m]);
-    const I = C / 2 - S / 2, H = $ / 2 - x[m] / 2 - 1, F = Ne(f[b], H), j = Ne(f[y], H), W = F, Z = $ - x[m] - j, J = $ / 2 - x[m] / 2 + I, ee = at(W, J, Z), ae = !d.arrow && He(n) != null && J !== ee && o.reference[m] / 2 - (J < W ? F : j) - x[m] / 2 < 0, N = ae ? J < W ? J - W : J - Z : 0;
+    const I = C / 2 - S / 2, H = $ / 2 - x[m] / 2 - 1, F = Ne(f[b], H), j = Ne(f[y], H), W = F, Z = $ - x[m] - j, J = $ / 2 - x[m] / 2 + I, ee = at(W, J, Z), ae = !d.arrow && He(n) != null && J !== ee && o.reference[m] / 2 - (J < W ? F : j) - x[m] / 2 < 0, O = ae ? J < W ? J - W : J - Z : 0;
     return {
-      [g]: v[g] + N,
+      [g]: v[g] + O,
       data: {
         [g]: ee,
-        centerOffset: J - ee - N,
+        centerOffset: J - ee - O,
         ...ae && {
-          alignmentOffset: N
+          alignmentOffset: O
         }
       },
       reset: ae
@@ -1385,7 +1385,7 @@ const ya = (e) => ({
           switch (g) {
             case "bestFit": {
               var j;
-              const ee = (j = I.map((ae) => [ae.placement, ae.overflows.filter((N) => N > 0).reduce((N, O) => N + O, 0)]).sort((ae, N) => ae[1] - N[1])[0]) == null ? void 0 : j[0];
+              const ee = (j = I.map((ae) => [ae.placement, ae.overflows.filter((O) => O > 0).reduce((O, R) => O + R, 0)]).sort((ae, O) => ae[1] - O[1])[0]) == null ? void 0 : j[0];
               ee && (J = ee);
               break;
             }
@@ -2108,7 +2108,7 @@ const Ya = ["data-side"], Xt = {
               ref_key: "contentRef",
               ref: V,
               class: L(["abl-popper", `is-${e.effect}`, e.popperClass, { "isSelect-popper": t.isSelect }]),
-              style: R(w.value),
+              style: N(w.value),
               "data-side": S.value,
               onMousedown: H[0] || (H[0] = U(() => {
               }, ["stop"]))
@@ -2121,7 +2121,7 @@ const Ya = ["data-side"], Xt = {
                 ref_key: "arrowRef",
                 ref: a,
                 class: "abl-popper__arrow",
-                style: R($.value)
+                style: N($.value)
               }, null, 4)) : z("", !0)
             ], 46, Ya)) : z("", !0)
           ]),
@@ -2350,12 +2350,12 @@ const et = (e) => ($e("data-v-bc247383"), e = e(), ke(), e), Ja = ["onClick"], G
     };
     return (v, g) => (r(), u("div", {
       class: L(["abl-rate", { disabled: e.readonly }]),
-      style: R(`--color: ${e.color};`),
+      style: N(`--color: ${e.color};`),
       onMouseleave: h
     }, [
       (r(!0), u(Y, null, ne(e.count, (m) => (r(), u("div", {
         class: L(["abl-rate-star", { "abl-rate-star-half": e.allowHalf && a.value >= m - 0.5 && a.value < m, "abl-rate-star-full": a.value >= m, "temp-gray": !e.allowHalf && n.value === m }]),
-        style: R(`margin-right: ${m !== e.count ? e.gap : 0}px;`),
+        style: N(`margin-right: ${m !== e.count ? e.gap : 0}px;`),
         onClick: (x) => e.allowHalf ? f(x) : s(m),
         key: m
       }, [
@@ -2369,7 +2369,7 @@ const et = (e) => ($e("data-v-bc247383"), e = e(), ke(), e), Ja = ["onClick"], G
           e.character === "star-filled" ? (r(), u("svg", {
             key: 0,
             class: "action-star",
-            style: R(`width: ${e.size}px;`),
+            style: N(`width: ${e.size}px;`),
             focusable: "false",
             "data-icon": "star",
             "aria-hidden": "true",
@@ -2377,7 +2377,7 @@ const et = (e) => ($e("data-v-bc247383"), e = e(), ke(), e), Ja = ["onClick"], G
           }, Qa, 4)) : e.character === "star-outlined" ? (r(), u("svg", {
             key: 1,
             class: "action-star",
-            style: R(`width: ${e.size}px;`),
+            style: N(`width: ${e.size}px;`),
             focusable: "false",
             "data-icon": "star",
             "aria-hidden": "true",
@@ -2385,7 +2385,7 @@ const et = (e) => ($e("data-v-bc247383"), e = e(), ke(), e), Ja = ["onClick"], G
           }, tn, 4)) : (r(), u("span", {
             key: 2,
             class: "action-star",
-            style: R(`font-size: ${0.66 * e.size}px; height: ${e.size}px;`)
+            style: N(`font-size: ${0.66 * e.size}px; height: ${e.size}px;`)
           }, [
             A(v.$slots, "character", {}, () => [
               K(T(e.character), 1)
@@ -2401,7 +2401,7 @@ const et = (e) => ($e("data-v-bc247383"), e = e(), ke(), e), Ja = ["onClick"], G
           e.character === "star-filled" ? (r(), u("svg", {
             key: 0,
             class: "action-star",
-            style: R(`width: ${e.size}px;`),
+            style: N(`width: ${e.size}px;`),
             focusable: "false",
             "data-icon": "star",
             "aria-hidden": "true",
@@ -2409,7 +2409,7 @@ const et = (e) => ($e("data-v-bc247383"), e = e(), ke(), e), Ja = ["onClick"], G
           }, nn, 4)) : e.character === "star-outlined" ? (r(), u("svg", {
             key: 1,
             class: "action-star",
-            style: R(`width: ${e.size}px;`),
+            style: N(`width: ${e.size}px;`),
             focusable: "false",
             "data-icon": "star",
             "aria-hidden": "true",
@@ -2417,7 +2417,7 @@ const et = (e) => ($e("data-v-bc247383"), e = e(), ke(), e), Ja = ["onClick"], G
           }, sn, 4)) : (r(), u("span", {
             key: 2,
             class: "action-star",
-            style: R(`font-size: ${0.66 * e.size}px; height: ${e.size}px;`)
+            style: N(`font-size: ${0.66 * e.size}px; height: ${e.size}px;`)
           }, [
             A(v.$slots, "character", {}, () => [
               K(T(e.character), 1)
@@ -2461,7 +2461,7 @@ const un = {
       })
     ), ye("getChildIndex", n), (i, d) => (r(), u("div", {
       class: "abl-collapse__wrap",
-      style: R({ background: e.background })
+      style: N({ background: e.background })
     }, [
       A(i.$slots, "default", {}, void 0, !0)
     ], 4));
@@ -2537,7 +2537,7 @@ const fn = { class: "abl-collapse__title" }, pn = { key: 0 }, vn = { class: "ico
       c("div", {
         onClick: b[0] || (b[0] = (y) => m(!v.value)),
         class: L(["abl-collapse-item__title", { "abl-collapse-item__disabled": e.disabled }]),
-        style: R({ background: e.background })
+        style: N({ background: e.background })
       }, [
         c("div", fn, [
           A(k.$slots, "title", {}, () => [
@@ -2553,13 +2553,13 @@ const fn = { class: "abl-collapse__title" }, pn = { key: 0 }, vn = { class: "ico
           ])) : (r(), u("div", {
             key: 1,
             class: "abl-collapse-item__arrow-inner",
-            style: R({ borderColor: e.arrowColor })
+            style: N({ borderColor: e.arrowColor })
           }, null, 4))
         ], 2)) : z("", !0)
       ], 6),
       c("div", {
         class: L(["abl-collapse-item__content-wrap", { "abl-collapse-item-__content-ani": e.animation }]),
-        style: R({ height: v.value ? `${te(t) ? d.value + "px" : "auto"}` : "0px", background: e.contentBg })
+        style: N({ height: v.value ? `${te(t) ? d.value + "px" : "auto"}` : "0px", background: e.contentBg })
       }, [
         c("div", {
           ref_key: "ablCollapseEl",
@@ -2616,15 +2616,15 @@ const gn = { class: "abl-progress-text" }, bn = {
     const l = e, t = M(() => typeof l.width == "number" ? l.width + "px" : l.width), a = M(() => typeof l.strokeColor == "string" ? l.strokeColor : `linear-gradient(to ${l.strokeColor.direction || "right"}, ${l.strokeColor["0%"] || l.strokeColor.from}, ${l.strokeColor["100%"] || l.strokeColor.to})`), n = M(() => l.format(`${l.percent > 100 ? 100 : l.percent}`));
     return (o, s) => (r(), u("div", {
       class: "abl-progress-line",
-      style: R(`width: ${t.value};`)
+      style: N(`width: ${t.value};`)
     }, [
       c("div", {
         class: "abl-progress-inner",
-        style: R(`border-radius: ${e.borderRadius}px;background:${l.trailColor}`)
+        style: N(`border-radius: ${e.borderRadius}px;background:${l.trailColor}`)
       }, [
         c("div", {
           class: L(["abl-progress-bg", e.indeterminate && "abl-progress-bg-animate"]),
-          style: R(`background: ${a.value}; 
+          style: N(`background: ${a.value}; 
         width: ${e.percent >= 100 ? 100 : e.percent}%; height: ${e.height}px;border-radius: ${e.borderRadius}px`)
         }, null, 6)
       ], 4),
@@ -2867,13 +2867,13 @@ const Ln = /* @__PURE__ */ c("div", {
       v.value = 0, i.value = 1, h.value = 0, f.value = 0;
     }, $ = (F) => {
       console.log("e====", F);
-      const j = F.target, { top: W, left: Z, right: J, bottom: ee } = j.getBoundingClientRect(), ae = document.documentElement.clientWidth, N = document.documentElement.clientHeight;
+      const j = F.target, { top: W, left: Z, right: J, bottom: ee } = j.getBoundingClientRect(), ae = document.documentElement.clientWidth, O = document.documentElement.clientHeight;
       d.value = F.clientX, p.value = F.clientY;
-      const O = h.value, P = f.value;
+      const R = h.value, P = f.value;
       document.onmousemove = (le) => {
-        h.value = O + le.clientX - d.value, f.value = P + le.clientY - p.value;
+        h.value = R + le.clientX - d.value, f.value = P + le.clientY - p.value;
       }, document.onmouseup = (le) => {
-        h.value > O + ae - J && (h.value = O + ae - J), h.value < O - Z && (h.value = O - Z), f.value > P + N - ee && (f.value = P + N - ee), f.value < P - W && (f.value = P - W), document.onmousemove = null;
+        h.value > R + ae - J && (h.value = R + ae - J), h.value < R - Z && (h.value = R - Z), f.value > P + O - ee && (f.value = P + O - ee), f.value < P - W && (f.value = P - W), document.onmousemove = null;
       };
     }, I = (F) => {
       const j = F.deltaY * a.zoomRate * 0.1;
@@ -2907,7 +2907,7 @@ const Ln = /* @__PURE__ */ c("div", {
             c("div", zn, [
               c("div", {
                 class: "abl-image-preview",
-                style: R(`transform: translate3d(${h.value}px, ${f.value}px, 0px);`)
+                style: N(`transform: translate3d(${h.value}px, ${f.value}px, 0px);`)
               }, [
                 (r(!0), u(Y, null, ne(e.previewSrcList, (W, Z) => X((r(), u("div", {
                   key: Z,
@@ -2916,7 +2916,7 @@ const Ln = /* @__PURE__ */ c("div", {
                   c("img", {
                     src: W,
                     class: "abl-image-preview__img",
-                    style: R(`transform: scale3d(${i.value}, ${i.value}, 1) rotate(${v.value}deg);`),
+                    style: N(`transform: scale3d(${i.value}, ${i.value}, 1) rotate(${v.value}deg);`),
                     onLoad: (J) => x(Z),
                     onMousedown: j[0] || (j[0] = U((J) => $(J), ["prevent"])),
                     onClick: j[1] || (j[1] = U(() => {
@@ -3048,7 +3048,7 @@ const Zn = { class: "abl-image-wrap" }, Qn = ["src"], Gt = {
       return r(), u("div", Zn, [
         c("div", {
           class: "abl-image",
-          style: R(`width: ${e.width}`),
+          style: N(`width: ${e.width}`),
           onClick: i
         }, [
           t.lazy ? X((r(), u("img", Be({
@@ -3098,7 +3098,7 @@ const Zt = {
     const l = e;
     return (t, a) => (r(), u("div", {
       class: L(["abl-skeleton-avatar", `abl-skeleton-avatar--${l.shape}`]),
-      style: R(`width: ${l.width}`)
+      style: N(`width: ${l.width}`)
     }, null, 6));
   }
 };
@@ -3114,7 +3114,7 @@ const ot = {
     const l = e;
     return (t, a) => (r(), u("div", {
       class: L(["abl-skeleton-paragraph"]),
-      style: R(`width: ${l.width}`)
+      style: N(`width: ${l.width}`)
     }, null, 4));
   }
 };
@@ -3200,7 +3200,7 @@ const oo = /* @__PURE__ */ c("svg", {
     const l = e;
     return (t, a) => (r(), u("div", {
       class: L(["abl-skeleton-image", `abl-skeleton-image--${l.shape}`]),
-      style: R(`width: ${l.width}`)
+      style: N(`width: ${l.width}`)
     }, so, 6));
   }
 }, co = (e) => {
@@ -3340,7 +3340,7 @@ const ro = (e) => ($e("data-v-b0efe321"), e = e(), ke(), e), uo = ["onClick"], f
     }, [
       c("div", {
         class: "abl-dropdown-menu",
-        style: R({
+        style: N({
           height: g(e.height)
         }),
         ref_key: "dropdownMenuRef",
@@ -3353,7 +3353,7 @@ const ro = (e) => ($e("data-v-b0efe321"), e = e(), ke(), e), uo = ["onClick"], f
         }, [
           c("span", {
             class: "abl-dropdown-menu__item__title",
-            style: R({
+            style: N({
               color: I.disabled ? "#c0c4cc" : H === f.value ? e.activeColor : e.inactiveColor,
               fontSize: g(e.titleSize)
             })
@@ -3369,7 +3369,7 @@ const ro = (e) => ($e("data-v-b0efe321"), e = e(), ke(), e), uo = ["onClick"], f
       ], 4),
       X(c("div", {
         class: "abl-dropdown-item__content--wrapper",
-        style: R([
+        style: N([
           {
             top: g(h.value)
           }
@@ -3706,7 +3706,7 @@ const tt = (e) => ($e("data-v-1a0f5179"), e = e(), ke(), e), Do = { class: "abl-
   setup(e) {
     return (l, t) => (r(), u("div", {
       class: L(`abl-spin-wrap ${e.size}`),
-      style: R(`--color: ${e.color};`)
+      style: N(`--color: ${e.color};`)
     }, [
       X(c("div", {
         class: L(["abl-spin", [{ "fixed-spin": e.fixed }]])
@@ -4040,19 +4040,19 @@ const ps = { class: "abl-select-warpper-content" }, vs = { class: "abl-select-ha
       trigger: "click",
       transitionName: "abl-select-menu"
     }), h = _(""), f = _(), v = _(null), g = _(""), m = _(), x = _(s.modelValue), k = _(!1), b = M(() => {
-      var O;
-      return { width: (((O = f.value) == null ? void 0 : O.getBoundingClientRect().width) || 0) + "px" };
+      var R;
+      return { width: (((R = f.value) == null ? void 0 : R.getBoundingClientRect().width) || 0) + "px" };
     }), y = Re({
       list: s == null ? void 0 : s.options
     }), V = _(!1), C = _(
       s.search && g.value === "focus" && V.value
     ), S = M(() => s.disabled), w = _(""), $ = _([]), I = () => (a == null ? void 0 : a.default) && (a == null ? void 0 : a.default()) || [], H = () => {
-      var N;
+      var O;
       try {
-        a.default && (y.list = [], (N = a.default()) == null || N.map((O) => {
+        a.default && (y.list = [], (O = a.default()) == null || O.map((R) => {
           var P;
-          if (O.props) {
-            const { value: le, name: B, img: D, iconColor: E } = O.props;
+          if (R.props) {
+            const { value: le, name: B, img: D, iconColor: E } = R.props;
             y.list.push({
               value: le,
               name: B,
@@ -4065,7 +4065,7 @@ const ps = { class: "abl-select-warpper-content" }, vs = { class: "abl-select-ha
               iconColor: E
             });
           } else
-            ((P = O == null ? void 0 : O.children) == null ? void 0 : P.length) > 0 && O.children.map((le) => {
+            ((P = R == null ? void 0 : R.children) == null ? void 0 : P.length) > 0 && R.children.map((le) => {
               const { value: B, name: D, img: E, iconColor: q } = le.props;
               y.list.push({
                 value: B,
@@ -4080,8 +4080,8 @@ const ps = { class: "abl-select-warpper-content" }, vs = { class: "abl-select-ha
               }));
             });
         }), i = y.list);
-      } catch (O) {
-        console.log(O);
+      } catch (R) {
+        console.log(R);
       }
     };
     ce(I, () => {
@@ -4093,34 +4093,40 @@ const ps = { class: "abl-select-warpper-content" }, vs = { class: "abl-select-ha
       // 如果需要，可以设置为立即执行
       deep: !0
     });
-    const F = (N) => {
+    const F = (O) => {
       if (!C.value)
         w.value = "";
       else {
-        const O = i.filter((P) => {
-          let le = N.target.value.toLowerCase();
+        const R = i.filter((P) => {
+          let le = O.target.value.toLowerCase();
           return P.name.toLowerCase().includes(le);
         });
-        y.list = O;
+        y.list = R;
       }
-    }, j = (N) => {
-      s.disabled || (V.value = !0, g.value === "focus" ? g.value = "blur" : g.value = "focus");
-    }, W = (N, O) => {
+    }, j = (O) => {
+      s.disabled || (V.value = !0, g.value === "focus" ? g.value = "blur" : g.value = "focus", setTimeout(() => {
+        const R = document.querySelector("#abl-select .abl-options-item-active");
+        R == null || R.scrollIntoView({
+          behavior: "auto",
+          block: "nearest"
+        });
+      }, 100));
+    }, W = (O, R) => {
       var le;
       if (s.disabled)
         return;
-      if (N.name == h.value) {
+      if (O.name == h.value) {
         m.value.close();
         return;
       }
-      V.value = !1, O.stopPropagation(), (le = v.value) == null || le.blur();
+      V.value = !1, R.stopPropagation(), (le = v.value) == null || le.blur();
       let P = null;
-      g.value = "blur", $.value[0] && $.value[0].value === N.value ? $.value.shift() : $.value[0] = N, P = N.value, d("update:modelValue", P), d("change", P, ht($.value)), m.value.close();
+      g.value = "blur", $.value[0] && $.value[0].value === O.value ? $.value.shift() : $.value[0] = O, P = O.value, d("update:modelValue", P), d("change", P, ht($.value)), m.value.close();
     };
     ye("handleSlotClick", W);
     const Z = () => {
-      var N;
-      (N = v.value) == null || N.focus(), !C.value && g.value === "focus" && $.value.length > 0 && ($.value.pop(), d("change", ht($.value)));
+      var O;
+      (O = v.value) == null || O.focus(), !C.value && g.value === "focus" && $.value.length > 0 && ($.value.pop(), d("change", ht($.value)));
     }, J = () => {
       k.value = !1, g.value = "blur", w.value = "";
     }, ee = () => {
@@ -4130,42 +4136,42 @@ const ps = { class: "abl-select-warpper-content" }, vs = { class: "abl-select-ha
     };
     return ce(
       V,
-      (N) => {
-        C.value = s.search && g.value === "focus" && N;
+      (O) => {
+        C.value = s.search && g.value === "focus" && O;
       },
       { immediate: !0, deep: !0 }
     ), ce(
       () => $.value,
-      (N) => {
-        N.length == 0 ? h.value = "" : h.value = N.map((O) => O == null ? void 0 : O.name).join(",");
+      (O) => {
+        O.length == 0 ? h.value = "" : h.value = O.map((R) => R == null ? void 0 : R.name).join(",");
       },
       { immediate: !0, deep: !0 }
     ), ce(() => s == null ? void 0 : s.options, () => {
-      var N;
-      s == null || s.options.map((O) => {
-        O.name = O[s.parames.name], O.value = O[s.parames.value];
-      }), i = s == null ? void 0 : s.options, s == null || s.options.map((O) => {
-        O.value == s.modelValue && (O.selected = !0);
-      }), y.list = s == null ? void 0 : s.options, $.value = [], $.value = (N = s == null ? void 0 : s.options) == null ? void 0 : N.filter((O) => O.selected === !0);
+      var O;
+      s == null || s.options.map((R) => {
+        R.name = R[s.parames.name], R.value = R[s.parames.value];
+      }), i = s == null ? void 0 : s.options, s == null || s.options.map((R) => {
+        R.value == s.modelValue && (R.selected = !0);
+      }), y.list = s == null ? void 0 : s.options, $.value = [], $.value = (O = s == null ? void 0 : s.options) == null ? void 0 : O.filter((R) => R.selected === !0);
     }, { immediate: !0, deep: !0 }), xe(() => {
-      ce(g, (N) => {
-        var O, P;
-        N === "focus" ? (O = v.value) == null || O.focus() : (P = v.value) == null || P.blur(), C.value = s.search && N === "focus" && V;
+      ce(g, (O) => {
+        var R, P;
+        O === "focus" ? (R = v.value) == null || R.focus() : (P = v.value) == null || P.blur(), C.value = s.search && O === "focus" && V;
       }), document.body.addEventListener("click", () => {
         g.value = "blur";
       });
     }), ce(() => s.modelValue, async () => {
-      x.value = s.modelValue, x.value == "" && (h.value = "", $.value.splice(0, 1)), y.list.map((N) => {
-        N.value == s.modelValue && ($.value.splice(0, $.value.length), $.value.push({
-          value: N.value,
-          name: N.name,
-          img: N.img,
-          iconColor: N.iconColor
+      x.value = s.modelValue, x.value == "" && (h.value = "", $.value.splice(0, 1)), y.list.map((O) => {
+        O.value == s.modelValue && ($.value.splice(0, $.value.length), $.value.push({
+          value: O.value,
+          name: O.name,
+          img: O.img,
+          iconColor: O.iconColor
         }));
       });
     }, {
       immediate: !0
-    }), (N, O) => (r(), u("div", {
+    }), (O, R) => (r(), u("div", {
       ref_key: "selectRef",
       ref: f
     }, [
@@ -4182,7 +4188,7 @@ const ps = { class: "abl-select-warpper-content" }, vs = { class: "abl-select-ha
         content: se(() => [
           c("div", {
             class: "abl-select-options-warpper",
-            style: R(b.value),
+            style: N(b.value),
             id: "abl-select"
           }, [
             y.list.length > 0 ? (r(!0), u(Y, { key: 0 }, ne(y.list, (P, le) => (r(), u("div", {
@@ -4191,12 +4197,12 @@ const ps = { class: "abl-select-warpper-content" }, vs = { class: "abl-select-ha
               onClick: (B) => W(P, B)
             }, [
               o.value ? (r(), u("div", _s, [
-                A(N.$slots, "abloption", mt(ol(P)), void 0, !0)
+                A(O.$slots, "abloption", mt(ol(P)), void 0, !0)
               ])) : (r(), u("div", ws, [
                 P.iconColor ? (r(), u("div", {
                   key: 0,
                   class: "abl-options-item-icon",
-                  style: R({ "background-color": P.iconColor })
+                  style: N({ "background-color": P.iconColor })
                 }, null, 4)) : z("", !0),
                 P.img ? (r(), u("img", {
                   key: 1,
@@ -4215,29 +4221,29 @@ const ps = { class: "abl-select-warpper-content" }, vs = { class: "abl-select-ha
             onClick: j,
             id: "select-input-warpper",
             class: L(["abl-select-warpper", S.value ? "abl-select-warpper-disabled" : ""]),
-            style: R({ height: e.height }),
+            style: N({ height: e.height }),
             onKeydown: At(Z, ["delete"])
           }, [
             c("div", ps, [
               c("div", {
                 class: "abl-select-input",
-                style: R({ "line-height": e.height })
+                style: N({ "line-height": e.height })
               }, [
                 X(c("div", vs, [
                   c("span", null, [
-                    n.value ? A(N.$slots, "ablname", mt(Be({ key: 0 }, { name: h.value })), void 0, !0) : (r(), u("span", ms, T(h.value), 1))
+                    n.value ? A(O.$slots, "ablname", mt(Be({ key: 0 }, { name: h.value })), void 0, !0) : (r(), u("span", ms, T(h.value), 1))
                   ])
                 ], 512), [
                   [Q, $.value.length && !C.value]
                 ]),
                 X(c("input", {
-                  onBlur: O[0] || (O[0] = (P) => J()),
+                  onBlur: R[0] || (R[0] = (P) => J()),
                   type: "text",
                   class: L(["abl-select-input-focus", C.value ? "abl-select-input-search" : ""]),
                   ref_key: "inputFocus",
                   ref: v,
-                  "onUpdate:modelValue": O[1] || (O[1] = (P) => w.value = P),
-                  onFocus: O[2] || (O[2] = (P) => ee()),
+                  "onUpdate:modelValue": R[1] || (R[1] = (P) => w.value = P),
+                  onFocus: R[2] || (R[2] = (P) => ee()),
                   onInput: F,
                   placeholder: h.value
                 }, null, 42, hs), [
@@ -4246,14 +4252,14 @@ const ps = { class: "abl-select-warpper-content" }, vs = { class: "abl-select-ha
                 k.value ? z("", !0) : X((r(), u("span", {
                   key: 0,
                   class: "abl-select-placeholder",
-                  style: R({ "line-height": e.height })
+                  style: N({ "line-height": e.height })
                 }, T(e.placeholder), 5)), [
                   [Q, !$.value.length]
                 ])
               ], 4),
               c("span", {
                 class: "abl-select-icon",
-                style: R({ "line-height": e.height })
+                style: N({ "line-height": e.height })
               }, [
                 X(c("i", gs, null, 512), [
                   [Q, g.value != "focus"]
@@ -4274,7 +4280,7 @@ const ps = { class: "abl-select-warpper-content" }, vs = { class: "abl-select-ha
       }, 16, ["disabled", "zIndex", "popperClass"])
     ], 512));
   }
-}, kt = /* @__PURE__ */ G(ks, [["__scopeId", "data-v-33470a2c"]]);
+}, kt = /* @__PURE__ */ G(ks, [["__scopeId", "data-v-cb5c1291"]]);
 const Ss = { class: "abl-header" }, Cs = { class: "abl-title" }, Bs = { class: "abl-extra" }, Vs = { key: 0 }, Ls = ["colspan"], zs = { key: 1 }, Is = {
   __name: "index",
   props: {
@@ -4701,19 +4707,19 @@ const el = (e) => ($e("data-v-f9f5ec36"), e = e(), ke(), e), Ws = {
       y.value = !1;
     }, ae = (B) => {
       t.disabled || (p.start(B), s = t.modelValue, V(s) ? o = s.map(F) : o = F(s), d.value = "start");
-    }, N = (B) => {
+    }, O = (B) => {
       if (t.disabled)
         return;
       d.value === "start" && a("dragStart"), p.move(B), d.value = "draging", B.type.startsWith("touch") && (y.value = !0);
       const D = Ct(i);
       let E = p.deltaX.value, q = D.width, de = E / q * f.value;
       t.vertical && (E = p.deltaY.value, q = D.height, de = E / q * f.value), V(o) ? s[n.value] = o[n.value] + de : s = o + de, Z(s);
-    }, O = (B) => {
-      t.disabled || d.value === "draging" && (Z(s, !0), a("dragEnd"), window.removeEventListener("mousemove", N), window.removeEventListener("touchmove", N), window.removeEventListener("mouseup", O), window.removeEventListener("touchend", O), B.type.startsWith("touch") && (y.value = !1), setTimeout(() => {
+    }, R = (B) => {
+      t.disabled || d.value === "draging" && (Z(s, !0), a("dragEnd"), window.removeEventListener("mousemove", O), window.removeEventListener("touchmove", O), window.removeEventListener("mouseup", R), window.removeEventListener("touchend", R), B.type.startsWith("touch") && (y.value = !1), setTimeout(() => {
         d.value = "";
       }));
     }, P = (B, D) => {
-      t.disabled || (ae(B), window.addEventListener("mousemove", N), window.addEventListener("touchmove", N), window.addEventListener("mouseup", O), window.addEventListener("touchend", O));
+      t.disabled || (ae(B), window.addEventListener("mousemove", O), window.addEventListener("touchmove", O), window.addEventListener("mouseup", R), window.addEventListener("touchend", R));
     }, le = (B) => Array.isArray(t.modelValue) && typeof B == "number" ? t.modelValue[B] : Number(t.modelValue);
     return (B, D) => (r(), u("div", {
       class: L(x.value)
@@ -4722,7 +4728,7 @@ const el = (e) => ($e("data-v-f9f5ec36"), e = e(), ke(), e), Ws = {
       c("div", {
         ref_key: "root",
         ref: i,
-        style: R(k.value),
+        style: N(k.value),
         class: L(m.value),
         onClick: U(J, ["stop"])
       }, [
@@ -4730,18 +4736,18 @@ const el = (e) => ($e("data-v-f9f5ec36"), e = e(), ke(), e), Ws = {
           (r(!0), u(Y, null, ne(h.value, (E) => (r(), u("span", {
             key: E,
             class: L($(E)),
-            style: R(I(E))
+            style: N(I(E))
           }, [
             K(T(E) + " ", 1),
             c("span", {
               class: "abl-range-tick",
-              style: R(H(E))
+              style: N(H(E))
             }, null, 4)
           ], 6))), 128))
         ])) : z("", !0),
         c("div", {
           class: "abl-range-bar",
-          style: R(w.value)
+          style: N(w.value)
         }, [
           e.range ? (r(), u(Y, { key: 0 }, ne([0, 1], (E) => c("div", {
             key: E,
@@ -4766,7 +4772,7 @@ const el = (e) => ($e("data-v-f9f5ec36"), e = e(), ke(), e), Ws = {
             B.$slots.button ? A(B.$slots, "button", { key: 0 }, void 0, !0) : (r(), u("div", {
               key: 1,
               class: "abl-range-button",
-              style: R(b.value)
+              style: N(b.value)
             }, [
               e.showTooltip ? (r(), u("div", {
                 key: 0,
@@ -4797,7 +4803,7 @@ const el = (e) => ($e("data-v-f9f5ec36"), e = e(), ke(), e), Ws = {
             B.$slots.button ? A(B.$slots, "button", { key: 0 }, void 0, !0) : (r(), u("div", {
               key: 1,
               class: "abl-range-button",
-              style: R(b.value)
+              style: N(b.value)
             }, [
               c("div", {
                 class: L(["abl-handle-tooltip", [{ "display-tooltip": y.value }]])