@shjjs/visual-ui 3.0.28 → 3.0.30

package/es/components/Interaction/components/Button/index.vue.mjs

@@ -1,7 +1,7 @@
 import o from "./index.vue2.mjs";
 /* empty css            */
 import t from "../../../../_virtual/_plugin-vue_export-helper.mjs";
-const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-8d66b1f5"]]);
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-c89af8cf"]]);
 export {
-  f as default
+  p as default
 };

package/es/components/Interaction/components/Button/index.vue2.mjs

@@ -199,7 +199,7 @@ const g = { class: "flex width-100 height-100 transition-all" }, k = ["ztitle"],
     });
     const u = m(() => t.value.style.textStyle.textOverflow && t.value.style.textStyle.textOverflow.enable ? t.value.style.textStyle.textOverflow.ellipsis.displayLines === 1 ? "text-overflow-ellipsis" : "text-overflow-ellipsis-2" : "");
     return (p, B) => (y(), x("button", {
-      class: "height-100 transition-all",
+      class: "height-100 transition-all btn-interaction",
       style: e(d(O).json2cssObject(t.value.style, "--", !0))
     }, [
       l("p", g, [

package/es/components/Interaction/components/MenuBar/index.vue.mjs

@@ -1,7 +1,7 @@
 import o from "./index.vue2.mjs";
 /* empty css            */
 import t from "../../../../_virtual/_plugin-vue_export-helper.mjs";
-const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-81270cd7"]]);
+const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-4a1f6630"]]);
 export {
-  c as default
+  a as default
 };

package/es/components/Interaction/components/MenuBar/index.vue2.mjs

@@ -1,6 +1,6 @@
-import { defineComponent as ue, ref as y, computed as D, onMounted as Ke, nextTick as oe, onUnmounted as je, watch as F, createElementBlock as M, openBlock as T, normalizeStyle as O, createElementVNode as X, Fragment as xe, renderList as Oe, createCommentVNode as J, normalizeClass as Ae, createVNode as ne, unref as re } from "vue";
+import { defineComponent as ue, ref as y, computed as D, onMounted as Ke, nextTick as oe, onUnmounted as je, watch as F, createElementBlock as M, openBlock as T, normalizeStyle as O, createElementVNode as X, Fragment as xe, renderList as Oe, createCommentVNode as J, normalizeClass as Ae, createVNode as ne, unref as ie } from "vue";
 import { nanoid as P } from "nanoid";
-import { isEqual as ie, cloneDeep as Ne } from "lodash";
+import { isEqual as re, cloneDeep as Ne } from "lodash";
 import $e from "../../../../commons/components/Text.vue.mjs";
 import De from "./MenuBarSubMenu.vue.mjs";
 /* empty css                                     */
@@ -182,9 +182,9 @@ const Pe = ["onMouseenter", "onClick"], _e = { class: "menu-item-content flex it
     "update-active-item"
   ],
   setup(se, { expose: pe, emit: ce }) {
-    const s = se, L = ce, A = y(null), d = y([]), R = y(P()), N = y(!1), h = y(null), r = y([]), f = y([]), k = y([]), m = y([]), i = y(null), p = y(!1), E = y(null);
+    const s = se, L = ce, A = y(null), m = y([]), R = y(P()), N = y(!1), h = y(null), i = y([]), v = y([]), k = y([]), d = y([]), r = y(null), p = y(!1), E = y(null);
     let w = null, C = null, b = null;
-    const v = D(() => s.option.menuBar?.navigationEcho ?? !0), g = D(() => s.option.menuBar?.unfold ?? !0), I = D(() => s.option.menuBar?.trigger || "click"), c = (e, l) => `${l}-${e.id}`, B = (e, l, t = []) => {
+    const f = D(() => s.option.menuBar?.navigationEcho ?? !0), g = D(() => s.option.menuBar?.unfold ?? !0), I = D(() => s.option.menuBar?.trigger || "click"), c = (e, l) => `${l}-${e.id}`, B = (e, l, t = []) => {
       for (const o of e) {
         if (o.id == l) return [...t, o];
         if (o.children?.length) {
@@ -249,60 +249,60 @@ const Pe = ["onMouseenter", "onClick"], _e = { class: "menu-item-content flex it
         id: t.id ?? P()
       };
       return o.children && o.children.length && (o.children = Z(o.children, l + 1)), o;
-    }), fe = (e) => e ? (B(d.value, e.id) || []).map((t) => t.id) : [], q = () => {
-      if (!v.value || !m.value.length) return;
-      r.value = [...m.value];
-      const e = m.value[m.value.length - 1], l = V(d.value, e);
-      l && (h.value = l), r.value.length > 0 && (i.value = r.value[0]);
+    }), fe = (e) => e ? (B(m.value, e.id) || []).map((t) => t.id) : [], q = () => {
+      if (!f.value || !d.value.length) return;
+      i.value = [...d.value];
+      const e = d.value[d.value.length - 1], l = V(m.value, e);
+      l && (h.value = l), i.value.length > 0 && (r.value = i.value[0]);
     }, G = (e, l = !1) => {
       if (!e) return;
       h.value = e;
-      const t = B(d.value, e.id) || [];
-      if (r.value = t.map((o) => o.id), v.value && r.value.length > 0 && (i.value = r.value[0]), l)
+      const t = B(m.value, e.id) || [];
+      if (i.value = t.map((o) => o.id), f.value && i.value.length > 0 && (r.value = i.value[0]), l)
         if (g.value) {
-          const o = r.value.map(
+          const o = i.value.map(
             (n, u) => c({ id: n }, u + 1)
           );
           a(o.slice(1)), p.value = !0;
         } else {
           const o = e.level || 1, n = [];
           for (let u = 1; u < o; u++) {
-            const S = r.value[u - 1];
+            const S = i.value[u - 1];
             n.push(c({ id: S }, u));
           }
           e.children?.length && n.push(c(e, o)), a(n), p.value = !0;
         }
       L("update-active-item", {
         item: e,
-        pathIds: r.value
+        pathIds: i.value
       });
     }, a = (e) => {
-      f.value = e, L("update-open-keys", e);
+      v.value = e, L("update-open-keys", e);
     }, he = (e) => {
       if (b && clearTimeout(b), b = null, E.value = e.id, I.value === "hover") {
         if (!e.children?.length) {
-          i.value = null, a([]), k.value = [], p.value = !1;
+          r.value = null, a([]), k.value = [], p.value = !1;
           return;
         }
-        v.value && m.value.length || (g.value ? (i.value = e.id, a([])) : (i.value = null, a([c(e, 1)])), k.value = [], p.value = !1);
+        g.value ? (r.value = e.id, a([])) : (r.value = null, a([c(e, 1)])), k.value = [], p.value = !1;
       }
     }, K = () => {
-      if (!v.value) {
-        h.value = null, r.value = [], m.value = [], a([]), i.value = null;
+      if (!f.value) {
+        h.value = null, i.value = [], d.value = [], a([]), r.value = null;
         return;
       }
-      !d.value.length || !N.value || s.sources.length >= 1 && ae.parse({
+      !m.value.length || !N.value || s.sources.length >= 1 && ae.parse({
         sources: [s.sources[0]],
         callback: (e) => {
           const l = e?.data?.[0]?.data?.[0]?.value ?? e?.data?.[0]?.data?.[0]?.id ?? e?.data?.[0]?.value ?? e?.data?.[0]?.id ?? null;
           if (!l) {
-            h.value = null, r.value = [], a([]), i.value = null;
+            h.value = null, i.value = [], a([]), r.value = null;
             return;
           }
-          const t = V(d.value, l);
+          const t = V(m.value, l);
           if (t) {
-            if (m.value = fe(t), h.value = t, r.value = [...m.value], r.value.length > 0 && (i.value = r.value[0]), g.value) {
-              const o = r.value.map(
+            if (d.value = fe(t), h.value = t, i.value = [...d.value], i.value.length > 0 && (r.value = i.value[0]), g.value) {
+              const o = i.value.map(
                 (n, u) => c({ id: n }, u + 1)
               );
               a(o.slice(1)), p.value = !0;
@@ -310,34 +310,34 @@ const Pe = ["onMouseenter", "onClick"], _e = { class: "menu-item-content flex it
               a([]), p.value = !1;
             L("update-active-item", {
               item: t,
-              pathIds: r.value
+              pathIds: i.value
             });
           } else
-            h.value = null, r.value = [], m.value = [], a([]), i.value = null;
+            h.value = null, i.value = [], d.value = [], a([]), r.value = null;
         }
       });
     }, ge = (e) => {
-      const l = e.level || 1, t = c(e, l), o = g.value && l === 1 ? i.value === e.id : f.value.includes(t);
+      const l = e.level || 1, t = c(e, l), o = g.value && l === 1 ? r.value === e.id : v.value.includes(t);
       let n = [];
-      o ? n = f.value.filter((u) => {
+      o ? n = v.value.filter((u) => {
         const S = String(u), [x] = S.split("-");
         return parseInt(x) < l;
-      }) : n = [...f.value.filter((S) => {
+      }) : n = [...v.value.filter((S) => {
         const x = String(S), [$] = x.split("-");
         return parseInt($) < l;
-      }), t], a(n), g.value && l === 1 && (o ? i.value = null : i.value = e.id);
+      }), t], a(n), g.value && l === 1 && (o ? r.value = null : r.value = e.id);
     }, ye = (e = !1) => {
-      Q(), a([]), k.value = [], p.value = !1, e && !v.value && (h.value = null, r.value = [], i.value = null);
+      Q(), a([]), k.value = [], p.value = !1, e && !f.value && (h.value = null, i.value = [], r.value = null);
     }, Q = () => {
       w && clearTimeout(w), C && clearTimeout(C), w = null, C = null;
     }, ee = (e) => {
-      const l = e.children && e.children.length > 0, t = B(d.value, e.id) || [], o = {
+      const l = e.children && e.children.length > 0, t = B(m.value, e.id) || [], o = {
         data: { ...e },
         parent: W(t)
       };
-      if (L("on-click", o), _.parseEvents(s.useEvents, "on-click", o), v.value && m.value.length && q(), l) {
-        if (I.value !== "click" && v.value && g.value && m.value.length) {
-          const n = r.value.map(
+      if (L("on-click", o), _.parseEvents(s.useEvents, "on-click", o), f.value && d.value.length && q(), l) {
+        if (I.value !== "click" && f.value && g.value && d.value.length) {
+          const n = i.value.map(
             (u, S) => c({ id: u }, S + 1)
           );
           a(n.slice(1)), p.value = !0;
@@ -345,30 +345,30 @@ const Pe = ["onMouseenter", "onClick"], _e = { class: "menu-item-content flex it
         }
         ge(e);
       } else
-        i.value = null, a([]), k.value = [], E.value = null, p.value = !1, v.value ? m.value.length && I.value !== "click" && q() : (h.value = null, r.value = [], m.value = [], L("update-active-item", {
+        r.value = null, a([]), k.value = [], E.value = null, p.value = !1, f.value ? d.value.length && I.value !== "click" && q() : (h.value = null, i.value = [], d.value = [], L("update-active-item", {
           item: null,
           pathIds: []
         }));
     }, Ie = (e) => {
       ee(e);
     }, Se = (e, l) => {
-      const t = c(e, l), o = f.value.includes(t);
+      const t = c(e, l), o = v.value.includes(t);
       let n = [];
-      o ? n = f.value.filter((x) => {
+      o ? n = v.value.filter((x) => {
         const $ = String(x), [z] = $.split("-");
         return parseInt(z) < l;
-      }) : n = [...f.value.filter(($) => {
+      }) : n = [...v.value.filter(($) => {
         const z = String($), [Be] = z.split("-");
         return parseInt(Be) < l;
       }), t], a(n);
-      const u = B(d.value, e.id) || [], S = {
+      const u = B(m.value, e.id) || [], S = {
         data: { ...e },
         parent: W(u)
       };
       L("on-click", S), _.parseEvents(s.useEvents, "on-click", S);
     }, ke = (e) => {
-      if (I.value !== "hover" || (w && clearTimeout(w), p.value) || v.value && m.value.length) return;
-      const t = (B(d.value, e.id) || []).map((n) => n.id), o = e.children?.length ? g.value ? t.slice(1).map((n, u) => c({ id: n }, u + 2)) : t.map((n, u) => c({ id: n }, u + 1)) : g.value ? t.slice(1, -1).map((n, u) => c({ id: n }, u + 2)) : t.slice(0, -1).map((n, u) => c({ id: n }, u + 1));
+      if (I.value !== "hover" || (w && clearTimeout(w), p.value)) return;
+      const t = (B(m.value, e.id) || []).map((n) => n.id), o = e.children?.length ? g.value ? t.slice(1).map((n, u) => c({ id: n }, u + 2)) : t.map((n, u) => c({ id: n }, u + 1)) : g.value ? t.slice(1, -1).map((n, u) => c({ id: n }, u + 2)) : t.slice(0, -1).map((n, u) => c({ id: n }, u + 1));
       a(o), k.value = t, L("update-hover-path", t);
     }, Ee = (e) => {
       I.value === "hover" && (p.value || e.relatedTarget && A.value && A.value.contains(e.relatedTarget) || (w = setTimeout(() => {
@@ -379,11 +379,11 @@ const Pe = ["onMouseenter", "onClick"], _e = { class: "menu-item-content flex it
     }, le = (e) => {
       if (A.value && !A.value.contains(e.target)) {
         if (E.value = null, k.value = [], I.value === "click") return;
-        v.value ? (a([]), E.value = null, p.value = !1) : (h.value = null, r.value = [], a([]), i.value = null, E.value = null, p.value = !1);
+        f.value ? (a([]), E.value = null, p.value = !1) : (h.value = null, i.value = [], a([]), r.value = null, E.value = null, p.value = !1);
       }
     }, be = () => {
       C = setTimeout(() => {
-        k.value = [], E.value = null, I.value === "hover" && (p.value || p.value || (g.value || a([]), v.value && m.value.length || (i.value = null)));
+        k.value = [], E.value = null, I.value === "hover" && (p.value || p.value || (g.value || a([]), f.value && d.value.length || (r.value = null)));
       }, 200);
     }, Le = () => {
       if (b && clearTimeout(b), I.value !== "hover") {
@@ -395,8 +395,8 @@ const Pe = ["onMouseenter", "onClick"], _e = { class: "menu-item-content flex it
       }, 200);
     }, we = () => {
       C && clearTimeout(C), b && clearTimeout(b), b = null;
-    }, Me = (e) => Array.isArray(r.value) ? r.value.some((l) => String(l) === String(e.id)) : !1, Te = (e) => String(E.value) === String(e.id), Y = (e) => {
-      const l = I.value === "click" && !!e.children?.length && (g.value ? i.value === e.id : f.value.includes(c(e, 1)));
+    }, Me = (e) => Array.isArray(i.value) ? i.value.some((l) => String(l) === String(e.id)) : !1, Te = (e) => String(E.value) === String(e.id), Y = (e) => {
+      const l = I.value === "click" && !!e.children?.length && (g.value ? r.value === e.id : v.value.includes(c(e, 1)));
       return Me(e) || Te(e) || l;
     }, Ce = D(() => {
       const e = s.option.menuPanel ?? {}, l = e.gap ?? 0, { gap: t, boxShadow: o, ...n } = e;
@@ -411,7 +411,7 @@ const Pe = ["onMouseenter", "onClick"], _e = { class: "menu-item-content flex it
       };
     }), j = () => {
       if (!s.sources?.length) {
-        d.value = [], N.value = !1, R.value = P(), _.parseEvents(s.useEvents, "dataListener", []), v.value && K();
+        m.value = [], N.value = !1, R.value = P(), _.parseEvents(s.useEvents, "dataListener", []), f.value && K();
         return;
       }
       N.value = !1;
@@ -421,18 +421,18 @@ const Pe = ["onMouseenter", "onClick"], _e = { class: "menu-item-content flex it
         callback: (l) => {
           try {
             const t = l?.data?.[0]?.data || [];
-            d.value = Z(Ne(t), 1), N.value = !0, R.value = P(), _.parseEvents(
+            m.value = Z(Ne(t), 1), N.value = !0, R.value = P(), _.parseEvents(
               s.useEvents,
               "dataListener",
-              d.value
+              m.value
             ), oe(() => {
               K();
             });
           } catch {
-            _.parseEvents(s.useEvents, "dataListener", null), d.value = [], N.value = !1, R.value = P();
+            _.parseEvents(s.useEvents, "dataListener", null), m.value = [], N.value = !1, R.value = P();
           }
         }
-      }), v.value && K();
+      }), f.value && K();
     };
     return Ke(() => {
       oe(j), document.addEventListener("click", le);
@@ -442,40 +442,40 @@ const Pe = ["onMouseenter", "onClick"], _e = { class: "menu-item-content flex it
       () => ({
         opt: s.option,
         src: s.sources,
-        navigationEcho: v.value,
+        navigationEcho: f.value,
         unfold: g.value
       }),
       (e, l) => {
-        ie(e, l) || (!ie(e.src, l.src) ? j() : (e.navigationEcho !== l.navigationEcho && K(), e.unfold !== l.unfold && h.value && G(h.value, !1), I.value !== "click" && j()));
+        re(e, l) || (!re(e.src, l.src) ? j() : (e.navigationEcho !== l.navigationEcho && K(), e.unfold !== l.unfold && h.value && G(h.value, !1), I.value !== "click" && j()));
       },
       { deep: !0 }
-    ), F(v, (e) => {
-      e ? K() : (h.value = null, r.value = [], m.value = [], a([]), i.value = null);
+    ), F(f, (e) => {
+      e ? K() : (h.value = null, i.value = [], d.value = [], a([]), r.value = null);
     }), F(g, (e) => {
       if (I.value === "click") {
         if (e) {
-          const l = f.value.find((t) => String(t).startsWith("1-"));
+          const l = v.value.find((t) => String(t).startsWith("1-"));
           if (l != null) {
             const t = String(l).slice(
               String(l).indexOf("-") + 1
-            ), o = d.value.find((n) => String(n.id) === t);
-            i.value = o ? o.id : null;
-          } else r.value?.length ? i.value = r.value[0] ?? null : i.value = null;
+            ), o = m.value.find((n) => String(n.id) === t);
+            r.value = o ? o.id : null;
+          } else i.value?.length ? r.value = i.value[0] ?? null : r.value = null;
         } else {
-          const l = i.value ?? (r.value?.length ? r.value[0] : null);
+          const l = r.value ?? (i.value?.length ? i.value[0] : null);
           if (l != null) {
             const t = c({ id: l }, 1);
-            f.value.includes(t) || a(
-              f.value.length ? [t, ...f.value] : [t]
+            v.value.includes(t) || a(
+              v.value.length ? [t, ...v.value] : [t]
             );
           }
-          i.value = null;
+          r.value = null;
         }
         return;
       }
-      if (h.value && v.value)
+      if (h.value && f.value)
         if (e) {
-          const l = r.value.map(
+          const l = i.value.map(
             (t, o) => c({ id: t }, o + 1)
           );
           a(l.slice(1)), p.value = !0;
@@ -488,7 +488,7 @@ const Pe = ["onMouseenter", "onClick"], _e = { class: "menu-item-content flex it
       clearAllState: () => ye(!0),
       updateActivePath: K,
       setEchoItem: (e) => {
-        const l = V(d.value, e);
+        const l = V(m.value, e);
         l && G(l, !1);
       }
     }), (e, l) => (T(), M("div", {
@@ -507,14 +507,14 @@ const Pe = ["onMouseenter", "onClick"], _e = { class: "menu-item-content flex it
           class: "menu-items-container",
           style: O({ gap: `${e.option.menuBar.gap ?? 4}px` })
         }, [
-          (T(!0), M(xe, null, Oe(d.value, (t) => (T(), M("div", {
+          (T(!0), M(xe, null, Oe(m.value, (t) => (T(), M("div", {
             key: c(t, 1),
             class: "first-level-item-wrapper"
           }, [
             X("div", {
               class: Ae(["menu-item", {
                 "is-active": Y(t),
-                "is-open": i.value === t.id,
+                "is-open": r.value === t.id,
                 "has-children": t.children?.length
               }]),
               style: O(ve(t)),
@@ -527,7 +527,7 @@ const Pe = ["onMouseenter", "onClick"], _e = { class: "menu-item-content flex it
                   key: 0,
                   class: "menu-icon",
                   style: O(
-                    re(H).json2cssObject({
+                    ie(H).json2cssObject({
                       width: e.option.menuItem.icon.width,
                       height: e.option.menuItem.icon.height,
                       marginRight: e.option.menuItem.icon.gap,
@@ -546,7 +546,7 @@ const Pe = ["onMouseenter", "onClick"], _e = { class: "menu-item-content flex it
                 key: 0,
                 class: "menu-arrow",
                 style: O(
-                  re(H).json2cssObject({
+                  ie(H).json2cssObject({
                     width: e.option.menuItem.arrow.width,
                     height: e.option.menuItem.arrow.height,
                     marginLeft: e.option.menuItem.arrow.gap,
@@ -557,7 +557,7 @@ const Pe = ["onMouseenter", "onClick"], _e = { class: "menu-item-content flex it
                 alt: ""
               }, null, 12, Re)) : J("", !0)
             ], 46, Pe),
-            t.children?.length && (g.value ? i.value === t.id : f.value.includes(c(t, 1))) ? (T(), M("div", {
+            t.children?.length && (g.value ? r.value === t.id : v.value.includes(c(t, 1))) ? (T(), M("div", {
               key: 0,
               class: "sub-menu-panel",
               style: O(Ce.value),
@@ -568,8 +568,8 @@ const Pe = ["onMouseenter", "onClick"], _e = { class: "menu-item-content flex it
                 items: t.children,
                 level: 2,
                 option: e.option,
-                "active-path-ids": r.value,
-                "opened-sub-menu-ids": f.value,
+                "active-path-ids": i.value,
+                "opened-sub-menu-ids": v.value,
                 "hover-path-ids": k.value,
                 "use-events": e.useEvents,
                 onSelect: Ie,

package/es/components/Interaction/components/Tabs/index.vue.mjs

@@ -226,7 +226,7 @@ const I = ["onClick"], P = g({ name: "ShjTabs" }), ti = /* @__PURE__ */ g({
       }, null, 4)) : x("", !0),
       (s(!0), l(V, null, B(e.value, (p, O) => (s(), l("div", {
         key: O,
-        class: N(["flex flex-none cursor-pointer transition-color-background-color background-size-cover", { selected: p.value === r.value }]),
+        class: N(["flex flex-none cursor-pointer transition-color-background-color background-size-cover btn-interaction", { selected: p.value === r.value }]),
         style: c(
           u(v).json2cssObject(
             p.value === r.value ? t.value.style.item.selected : t.value.style.item

package/es/components/Interaction/components/Tabs-icon/index.vue.mjs

@@ -227,7 +227,7 @@ const F = ["onClick"], P = ["src"], U = x({ name: "ShjTabsIcon" }), re = /* @__P
       }, null, 4)) : k("", !0),
       (s(!0), l(V, null, w(m.value, (e, O) => (s(), l("div", {
         key: O,
-        class: B(["flex flex-none position-relative cursor-pointer transition-color-background-color background-size-cover", { selected: e.value === o.value }]),
+        class: B(["flex flex-none position-relative cursor-pointer transition-color-background-color background-size-cover btn-interaction", { selected: e.value === o.value }]),
         style: a(
           n(c).json2cssObject(
             e.value === o.value ? t.value.style.item.selected : t.value.style.item