@cldemo/ui-kit 1.1.2 → 1.1.4

package/buildLibs/modules/shared/Index.vue_vue_type_script_setup_true_lang-BfsyfrQL.js

@@ -0,0 +1,145 @@
+import { defineComponent as B, ref as L, useTemplateRef as O, computed as r, onBeforeUnmount as z, watch as M, nextTick as $, onMounted as D, openBlock as b, createBlock as F, Teleport as q, createVNode as J, Transition as V, withCtx as A, withDirectives as P, createElementVNode as R, withModifiers as U, normalizeStyle as Z, normalizeClass as j, unref as G, renderSlot as H, vShow as K, createElementBlock as Q, Fragment as W } from "vue";
+import k from "@cldemo/ui-kit/common/log";
+import l from "@cldemo/ui-kit/common/base";
+import X from "@cldemo/ui-kit/common/Element";
+import { u as Y, l as ee } from "./scrollLock-DQEGK5um.js";
+const te = ["id"], se = /* @__PURE__ */ B({
+  name: "ClOverlay",
+  __name: "Index",
+  props: {
+    id: String,
+    // desc: 组件实例唯一标识，用于多实例场景下 DOM 查询限定
+    className: String,
+    // desc: 自定义CSS类名
+    show: Boolean,
+    // desc: 是否显示遮罩，支持 v-model:show
+    zIndex: {
+      type: Number,
+      default: 2e3
+      // desc: 遮罩层级
+    },
+    duration: {
+      type: Number,
+      default: 300
+      // desc: 动画时长(ms)
+    },
+    isLockScroll: {
+      type: Boolean,
+      default: !0
+      // desc: 遮罩显示时是否锁定背景滚动
+    },
+    background: {
+      type: String,
+      default: "var(--cl-overlay, rgba(0, 0, 0, 0.7))"
+      // desc: 遮罩背景色（支持任意合法 CSS 颜色值）
+    },
+    teleportTarget: {
+      type: String,
+      default: ""
+      // desc: 挂载目标 | enum: body, self (可自定义)
+    }
+  },
+  emits: ["update:show", "onClick"],
+  setup(d, { emit: g }) {
+    const t = d, m = g, S = t.id, a = L(t.show);
+    let o = null;
+    const s = O("refElOverlay"), f = r(
+      () => l.isNonEmptyString(t.teleportTarget) ? N(t.teleportTarget) : "body"
+    ), c = r(() => t.teleportTarget === "self"), w = r(() => c.value), p = r(() => {
+      const e = t.duration;
+      return l.isNumber(e) && l.isFinite(e) && e >= 0 && e <= 1e4 ? e : 300;
+    }), h = r(() => {
+      const e = t.zIndex;
+      return l.isNumber(e) && l.isFinite(e) && e >= 0 ? e : 2e3;
+    }), T = r(() => {
+      const e = {
+        "panel-overlay": !0
+      };
+      return c.value && (e["panel-overlay-self"] = !0), l.getJsonMerge(e, X.getClassNameJson(t.className));
+    }), _ = r(() => ({
+      zIndex: h.value,
+      background: l.isNonEmptyString(t.background) ? t.background : "var(--cl-overlay, rgba(0, 0, 0, 0.7))",
+      "--overlay-duration": `${p.value}ms`
+    })), C = (e) => {
+      ee(e);
+    }, u = (e) => {
+      Y(e);
+    }, E = () => {
+      if (c.value) {
+        const v = s.value ? s.value.parentElement : null;
+        if (!v) return null;
+        let n = v;
+        for (; n && n !== document.body; ) {
+          if (window.getComputedStyle(n).position !== "static") return n;
+          n = n.parentElement;
+        }
+        return document.body;
+      }
+      const e = f.value;
+      if (e === "body") return document.body;
+      const i = document.querySelector(e);
+      return i === document.body ? document.body : i ?? document.body;
+    }, y = () => {
+      if (t.isLockScroll && t.show) {
+        const e = E();
+        e && o !== e && (o && u(o), o = e, C(e));
+      } else o && (u(o), o = null);
+    }, N = (e) => {
+      if (e === "self") return e;
+      try {
+        return document.querySelector(e) ? e : (k.warn("Overlay", `teleportTarget「${e}」未匹配到元素，已回退到 body`), "body");
+      } catch {
+        return k.warn("Overlay", `teleportTarget「${e}」不是合法的 CSS 选择器，已回退到 body`), "body";
+      }
+    };
+    z(() => {
+      o && (u(o), o = null);
+    }), M(
+      () => [t.show, t.isLockScroll],
+      () => {
+        t.show && (a.value = !0), $(() => {
+          y();
+        });
+      },
+      { immediate: !0 }
+    ), D(() => {
+      y();
+    });
+    const I = () => {
+      m("onClick"), m("update:show", !1);
+    }, x = () => {
+      t.show || (a.value = !1);
+    };
+    return (e, i) => a.value ? (b(), F(q, {
+      key: 0,
+      to: f.value,
+      disabled: w.value
+    }, [
+      J(V, {
+        name: "panel-overlay-fade",
+        duration: p.value,
+        appear: "",
+        onAfterLeave: x
+      }, {
+        default: A(() => [
+          P(R("div", {
+            ref_key: "refElOverlay",
+            ref: s,
+            id: G(S),
+            class: j(T.value),
+            style: Z(_.value),
+            onClick: U(I, ["self"])
+          }, [
+            H(e.$slots, "default")
+          ], 14, te), [
+            [K, d.show]
+          ])
+        ]),
+        _: 3
+      }, 8, ["duration"])
+    ], 8, ["to", "disabled"])) : (b(), Q(W, { key: 1 }, [], 64));
+  }
+});
+export {
+  se as _
+};

package/buildLibs/modules/shared/Index.vue_vue_type_script_setup_true_lang-BiBeEf5V.js

@@ -0,0 +1,64 @@
+import { defineComponent as c, computed as s, openBlock as p, createElementBlock as d, normalizeStyle as f, normalizeClass as y, unref as g, toDisplayString as S } from "vue";
+import o from "@cldemo/ui-kit/common/base";
+import N from "@cldemo/ui-kit/common/Element";
+const x = ["id"], B = /* @__PURE__ */ c({
+  name: "ClBadge",
+  __name: "Index",
+  props: {
+    id: String,
+    // desc: 组件实例唯一标识，用于多实例场景下 DOM 查询限定
+    className: String,
+    // desc: 自定义CSS类名
+    num: [String, Number],
+    // desc: 显示的数字
+    color: {
+      type: String,
+      default: "default"
+      // desc: 颜色主题 | enum: default, green, red, yellow, black, gray (可自定义)
+    },
+    colorSty: String,
+    // desc: 自定义颜色样式，传入后优先于 color 预设主题
+    maxNum: {
+      type: Number,
+      default: -1
+      // desc: 最大显示数字，超过显示 maxNum+，设为 -1 显示完整数字
+    },
+    isHideZero: {
+      type: Boolean,
+      default: !0
+      // desc: 是否隐藏数字为0的徽章
+    },
+    isDot: {
+      type: Boolean,
+      default: !1
+      // desc: 是否显示为圆点
+    }
+  },
+  setup(l) {
+    const e = l, m = e.id, n = () => {
+      let t = "";
+      if (!o.isEmpty(e.num)) {
+        const r = Number(e.num);
+        o.isFinite(r) ? r === 0 && e.isHideZero ? t = "" : r > e.maxNum && e.maxNum > 0 ? t = `${e.maxNum}+` : t = r.toString() : t = "";
+      }
+      return t;
+    }, a = s(() => n()), i = s(() => {
+      let t = {
+        badge: !0
+      };
+      return !o.isEmpty(e.color) && o.isEmpty(e.colorSty) && (t[`bg-${e.color}`] = !0), t = o.getJsonMerge(t, N.getClassNameJson(e.className)), e.isDot && o.isEmpty(n()) && (t["badge-dot"] = !0), t;
+    }), u = s(() => {
+      const t = {};
+      return e.colorSty && !o.isEmpty(e.colorSty) && (t["background-color"] = e.colorSty), t;
+    });
+    return (t, r) => (p(), d("span", {
+      id: g(m),
+      class: y(i.value),
+      style: f(u.value),
+      role: "status"
+    }, S(a.value), 15, x));
+  }
+});
+export {
+  B as _
+};