aibox-custom-component-packages 0.0.7 → 0.0.8

package/es/CustomToggle.mjs

@@ -1,17 +1,17 @@
-import { w as R } from "./chunks/index.bCzIhWFw.js";
-import { ref as W, computed as c, onMounted as Z, nextTick as b, createElementBlock as d, openBlock as a, normalizeClass as w, createElementVNode as V, createBlock as T, createCommentVNode as k, Fragment as j, renderList as D, normalizeStyle as G, createTextVNode as H, toDisplayString as S, unref as g, withCtx as v, createVNode as M } from "vue";
-import { useRoute as J } from "vue-router";
-import { ElDropdown as P, ElIcon as Q, ElDropdownMenu as U, ElDropdownItem as X } from "element-plus";
-import { IconZuoCopy as Y } from "color-message-aibox-vue";
-import { emitsMap as i } from "color-star-custom-methods";
-import { _ as ee } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
-import './assets/CustomToggle.css';const te = (y) => `${y}-custom-toggle`, oe = ["id", "data-option-value", "onClick"], le = {
+import { w as H } from "./chunks/index.bCzIhWFw.js";
+import { ref as J, computed as a, onMounted as P, createElementBlock as m, openBlock as i, normalizeClass as w, createElementVNode as S, createBlock as E, createCommentVNode as x, Fragment as N, renderList as T, normalizeStyle as Q, createTextVNode as U, toDisplayString as k, unref as g, withCtx as v, createVNode as O, nextTick as X } from "vue";
+import { useRoute as Y } from "vue-router";
+import { ElDropdown as ee, ElIcon as te, ElDropdownMenu as le, ElDropdownItem as ne } from "element-plus";
+import { IconZuoCopy as oe } from "color-message-aibox-vue";
+import { emitsMap as b } from "color-star-custom-methods";
+import { _ as se } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import './assets/CustomToggle.css';const re = (y) => `${y}-custom-toggle`, ae = ["id", "data-option-value", "onClick"], ie = {
   key: 0,
   class: "order-number fz-12 text-center mg-r-10 pd-l-8 pd-r-8"
-}, ne = {
+}, ue = {
   key: 1,
   class: "divider"
-}, se = { class: "toggle-item toggle-action flex items-center justify-center weight-500" }, re = { class: "dropdown-label" }, ae = /* @__PURE__ */ Object.assign({
+}, ce = { class: "toggle-item toggle-action flex items-center justify-center weight-500" }, de = { class: "dropdown-label" }, pe = /* @__PURE__ */ Object.assign({
   name: "CustomToggle"
 }, {
   __name: "layout",
@@ -52,96 +52,150 @@ import './assets/CustomToggle.css';const te = (y) => `${y}-custom-toggle`, oe =
       default: 1
     }
   },
-  emits: [i.updateModelValue, i.change],
-  setup(y, { emit: $ }) {
-    const o = y, u = $, x = W(null), B = J(), I = c(() => te(B.name)), z = () => {
+  emits: [b.updateModelValue, b.change],
+  setup(y, { emit: j }) {
+    const n = y, C = j, $ = J(null), B = Y(), M = a(() => re(B.name)), F = () => {
       try {
-        const e = sessionStorage.getItem(I.value);
-        if (e && o.options.length > 0 && o.options.some(
-          (t, n) => s(t, n) === e
+        const e = sessionStorage.getItem(M.value);
+        if (e && n.options.length > 0 && n.options.some(
+          (t, l) => s(t, l) === e
         ))
           return e;
       } catch {
         return null;
       }
       return null;
-    }, O = (e) => {
-      sessionStorage.setItem(I.value, e);
+    }, z = (e) => {
+      sessionStorage.setItem(M.value, e);
     };
-    let h = [];
-    const p = c(() => o.maxVisible !== void 0 ? o.maxVisible : o.options.length), C = c(() => {
+    let c = [];
+    const u = a(() => n.maxVisible !== void 0 ? n.maxVisible : n.options.length), A = a(() => _.value.length > 0);
+    a(() => _.value.length);
+    const f = a(() => {
+      if (!n.modelValue || n.options.length <= u.value) {
+        const r = n.options.slice(0, u.value);
+        return c = r, r;
+      }
+      const e = n.options.findIndex((r, I) => s(r, I) === n.modelValue);
+      if (e === -1) {
+        const r = n.options.slice(0, u.value);
+        return c = r, r;
+      }
+      if (c.map(
+        (r, I) => s(r, I)
+      ).includes(
+        n.modelValue
+      ) && c.length > 0)
+        return c;
+      const l = Math.max(0, e - u.value + 1), p = Math.min(
+        n.options.length,
+        l + u.value
+      ), V = n.options.slice(l, p);
+      return c = V, V;
+    }), K = a(() => `${100 / u.value}%`), _ = a(() => {
       const e = new Set(
-        m.value.map((l, t) => s(l))
+        f.value.map(
+          (o, t) => s(o, t)
+        )
       );
-      return o.options.filter((l, t) => !e.has(s(l)));
-    }), N = c(() => C.value.length > 0), m = c(() => {
-      if (!o.modelValue || o.options.length <= p.value) {
-        const r = o.options.slice(0, p.value);
-        return h = r, r;
+      return n.options.filter((o, t) => {
+        const l = s(o, t);
+        return !e.has(l);
+      });
+    });
+    a(() => n.options.slice(0, u.value));
+    const L = () => {
+      if (!n.options?.length) return;
+      const e = F();
+      if (e !== null) {
+        h(e);
+        return;
       }
-      const e = o.options.findIndex((r, ue) => f(r));
-      if (e === -1) {
-        const r = o.options.slice(0, p.value);
-        return h = r, r;
+      const o = n.options[0], t = s(o, 0);
+      h(t);
+    }, s = (e, o) => {
+      if (typeof e == "object" && e !== null) {
+        const t = n.fieldMapping.value;
+        return e[t] !== void 0 ? e[t] : o;
+      }
+      return e;
+    }, D = (e) => {
+      if (typeof e == "object" && e !== null) {
+        const o = n.fieldMapping.label, t = n.fieldMapping.value;
+        return e[o] || e[t] || e;
       }
-      const l = Math.max(0, e - p.value + 1), t = l + p.value, n = o.options.slice(l, t);
-      return n.length === 0 ? h : (h = n, n);
-    }), A = c(() => {
-      const e = m.value.length + (N.value ? 1 : 0);
-      return e > 0 ? `${100 / e}%` : "auto";
-    }), s = (e, l) => typeof e == "object" ? e[o.fieldMapping.value] : e, E = (e) => typeof e == "object" ? e[o.fieldMapping.label] : e, F = (e, l) => l + 1, f = (e, l) => s(e) === o.modelValue, K = (e, l) => o.styleType == 1 && l < m.value.length - 1, L = async (e, l) => {
-      const t = s(e);
-      u(i.updateModelValue, t), u(i.change, t), O(t), await b(), _();
-    }, q = async (e) => {
-      u(i.updateModelValue, e), u(i.change, e), O(e), await b(), _();
-    }, _ = () => {
-      if (!x.value) return;
-      const e = x.value.querySelector(".toggle-item.active");
-      e && e.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+      return e;
+    }, R = (e, o) => {
+      const t = s(e, o);
+      return n.options.findIndex((p, V) => s(p, V) === t) + 1;
+    }, d = (e, o) => s(e, o) === n.modelValue, W = (e, o) => {
+      if (o >= f.value.length - 1 || d(e, o))
+        return !1;
+      const t = f.value.findIndex(
+        (l, p) => d(l, p)
+      );
+      return !(t === -1 || o === t - 1);
+    }, Z = (e, o) => {
+      const t = s(e, o);
+      h(t);
+    }, q = (e) => {
+      h(e), setTimeout(() => {
+        G(e);
+      }, 50);
+    }, G = (e) => {
+      const o = `toggle-option-${e}`, t = document.getElementById(o);
+      t && t.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center"
+      });
+    }, h = (e) => {
+      z(e), C(b.updateModelValue, e), X(() => {
+        C(b.change, e);
+      });
     };
-    return Z(async () => {
-      const e = z();
-      e && (u(i.updateModelValue, e), u(i.change, e)), await b(), _();
-    }), (e, l) => (a(), d("div", {
+    return P(() => {
+      L();
+    }), (e, o) => (i(), m("div", {
       class: w(["toggle-container flex w-full relative", `toggle-style-${y.styleType}`])
     }, [
-      V("div", {
+      S("div", {
         ref_key: "optionsContainer",
-        ref: x,
+        ref: $,
         class: "visible-options flex-1 overflow-x-auto overflow-y-hidden relative flex"
       }, [
-        (a(!0), d(j, null, D(m.value, (t, n) => (a(), d("div", {
-          key: s(t),
-          id: `toggle-option-${s(t)}`,
-          "data-option-value": s(t),
+        (i(!0), m(N, null, T(f.value, (t, l) => (i(), m("div", {
+          key: s(t, l),
+          id: `toggle-option-${s(t, l)}`,
+          "data-option-value": s(t, l),
           class: w(["toggle-item pointer text-center flex items-center justify-center ellipsis-1 relative pointer", {
-            active: f(t),
-            "first-active": f(t) && n === 0,
-            "last-active": f(t) && n === m.value.length - 1
+            active: d(t, l),
+            "first-active": d(t, l) && l === 0,
+            "last-active": d(t, l) && l === f.value.length - 1
           }]),
-          style: G({ width: A.value }),
-          onClick: (r) => L(t)
+          style: Q({ width: K.value }),
+          onClick: (p) => Z(t, l)
         }, [
-          o.showOrderNumber ? (a(), d("div", le, S(F(t, n)), 1)) : k("", !0),
-          H(" " + S(E(t)) + " ", 1),
-          K(t, n) ? (a(), d("span", ne, "|")) : k("", !0)
-        ], 14, oe))), 128))
+          n.showOrderNumber ? (i(), m("div", ie, k(R(t, l)), 1)) : x("", !0),
+          U(" " + k(D(t)) + " ", 1),
+          W(t, l) ? (i(), m("span", ue, "|")) : x("", !0)
+        ], 14, ae))), 128))
       ], 512),
-      N.value ? (a(), T(g(P), {
+      A.value ? (i(), E(g(ee), {
         key: 0,
         trigger: "click",
         onCommand: q
       }, {
         dropdown: v(() => [
-          M(g(U), null, {
+          O(g(le), null, {
             default: v(() => [
-              (a(!0), d(j, null, D(C.value, (t, n) => (a(), T(g(X), {
-                key: s(t),
-                command: s(t),
-                class: w({ "is-active": f(t) })
+              (i(!0), m(N, null, T(_.value, (t, l) => (i(), E(g(ne), {
+                key: s(t, l),
+                command: s(t, l),
+                class: w({ "is-active": d(t, l) })
               }, {
                 default: v(() => [
-                  V("span", re, S(E(t)), 1)
+                  S("span", de, k(D(t)), 1)
                 ]),
                 _: 2
               }, 1032, ["command", "class"]))), 128))
@@ -150,21 +204,21 @@ import './assets/CustomToggle.css';const te = (y) => `${y}-custom-toggle`, oe =
           })
         ]),
         default: v(() => [
-          V("div", se, [
-            M(g(Q), null, {
+          S("div", ce, [
+            O(g(te), null, {
               default: v(() => [
-                M(g(Y))
+                O(g(oe))
               ]),
               _: 1
             })
           ])
         ]),
         _: 1
-      })) : k("", !0)
+      })) : x("", !0)
     ], 2));
   }
-}), ie = /* @__PURE__ */ ee(ae, [["__scopeId", "data-v-ce6ff91d"]]), ye = R(ie);
+}), me = /* @__PURE__ */ se(pe, [["__scopeId", "data-v-380c0444"]]), _e = H(me);
 export {
-  ye as CustomToggle,
-  ye as default
+  _e as CustomToggle,
+  _e as default
 };