aibox-custom-component-packages 0.0.6 → 0.0.8

package/es/CustomTitle.mjs

@@ -0,0 +1,7 @@
+import { w as t } from "./chunks/index.bCzIhWFw.js";
+import { C as o } from "./chunks/layout.CygCXa6s.js";
+const a = t(o);
+export {
+  a as CustomTitle,
+  a as default
+};

package/es/CustomToggle.mjs

@@ -0,0 +1,224 @@
+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"
+}, ue = {
+  key: 1,
+  class: "divider"
+}, 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",
+  props: {
+    // 选项列表
+    options: {
+      type: Array,
+      default: () => []
+    },
+    // 当前选中的值 (v-model)
+    modelValue: {
+      type: [String, Number, Object],
+      default: null
+    },
+    // 最大显示数量，超过此数量会显示收起/展开，如果不传则显示全部
+    maxVisible: {
+      type: Number,
+      default: void 0
+    },
+    // 字段映射配置 (如果是对象的话)
+    fieldMapping: {
+      type: Object,
+      default: () => ({
+        value: "value",
+        label: "label"
+      })
+    },
+    // 是否显示顺序数字
+    showOrderNumber: {
+      type: Boolean,
+      default: !1
+    },
+    // 样式风格
+    // 1: 默认（带底边框的 tab 风格）
+    // 2: 无底色，选中浅灰，圆角（参考 AiboxTabs style-1）
+    styleType: {
+      type: [Number, String],
+      default: 1
+    }
+  },
+  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(M.value);
+        if (e && n.options.length > 0 && n.options.some(
+          (t, l) => s(t, l) === e
+        ))
+          return e;
+      } catch {
+        return null;
+      }
+      return null;
+    }, z = (e) => {
+      sessionStorage.setItem(M.value, e);
+    };
+    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(
+        f.value.map(
+          (o, t) => s(o, t)
+        )
+      );
+      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 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;
+      }
+      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 P(() => {
+      L();
+    }), (e, o) => (i(), m("div", {
+      class: w(["toggle-container flex w-full relative", `toggle-style-${y.styleType}`])
+    }, [
+      S("div", {
+        ref_key: "optionsContainer",
+        ref: $,
+        class: "visible-options flex-1 overflow-x-auto overflow-y-hidden relative flex"
+      }, [
+        (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: d(t, l),
+            "first-active": d(t, l) && l === 0,
+            "last-active": d(t, l) && l === f.value.length - 1
+          }]),
+          style: Q({ width: K.value }),
+          onClick: (p) => Z(t, l)
+        }, [
+          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),
+      A.value ? (i(), E(g(ee), {
+        key: 0,
+        trigger: "click",
+        onCommand: q
+      }, {
+        dropdown: v(() => [
+          O(g(le), null, {
+            default: v(() => [
+              (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(() => [
+                  S("span", de, k(D(t)), 1)
+                ]),
+                _: 2
+              }, 1032, ["command", "class"]))), 128))
+            ]),
+            _: 1
+          })
+        ]),
+        default: v(() => [
+          S("div", ce, [
+            O(g(te), null, {
+              default: v(() => [
+                O(g(oe))
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      })) : x("", !0)
+    ], 2));
+  }
+}), me = /* @__PURE__ */ se(pe, [["__scopeId", "data-v-380c0444"]]), _e = H(me);
+export {
+  _e as CustomToggle,
+  _e as default
+};

package/es/DialogContainer.mjs

@@ -1,7 +1,26 @@
 import { w as C } from "./chunks/index.bCzIhWFw.js";
-import { ref as n, computed as b, onBeforeUnmount as B, createBlock as k, createCommentVNode as V, openBlock as O, unref as S, normalizeClass as x, withCtx as u, createElementVNode as T, renderSlot as i, nextTick as r } from "vue";
+import { ref as n, nextTick as r, computed as b, onBeforeUnmount as B, createBlock as k, createCommentVNode as V, openBlock as O, unref as S, normalizeClass as x, withCtx as u, createElementVNode as T, renderSlot as i } from "vue";
 import { ElDialog as $ } from "element-plus";
-import './assets/DialogContainer.css';const E = { class: "dialog-body" }, N = {
+import './assets/DialogContainer.css';const z = (e = n(!1)) => {
+  const o = n(null), s = n(null);
+  return {
+    dialogRef: o,
+    //弹窗的ref必须为dialogRef
+    formRef: s,
+    //弹窗里面含有form表单的话，ref必须为formRef
+    showDialog: () => {
+      o.value.showDialog();
+    },
+    hideDialog: () => {
+      e.value = !1, o.value.hideDialog();
+    },
+    resetDialog: () => {
+      e.value = !1, s.value && r(() => {
+        s.value.resetFields();
+      });
+    }
+  };
+}, E = { class: "dialog-body" }, N = {
   __name: "DialogContainer",
   props: {
     // 弹框宽度
@@ -109,25 +128,6 @@ import './assets/DialogContainer.css';const E = { class: "dialog-body" }, N = {
       _: 3
     }, 8, ["modelValue", "width", "title", "modal", "show-close", "destroy-on-close", "class", "draggable", "fullscreen"])) : V("", !0);
   }
-}, z = (e = n(!1)) => {
-  const o = n(null), s = n(null);
-  return {
-    dialogRef: o,
-    //弹窗的ref必须为dialogRef
-    formRef: s,
-    //弹窗里面含有form表单的话，ref必须为formRef
-    showDialog: () => {
-      o.value.showDialog();
-    },
-    hideDialog: () => {
-      e.value = !1, o.value.hideDialog();
-    },
-    resetDialog: () => {
-      e.value = !1, s.value && r(() => {
-        s.value.resetFields();
-      });
-    }
-  };
 }, F = C(N);
 export {
   F as DialogContainer,