@cldemo/ui-kit 1.0.17 → 1.1.0

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

@@ -0,0 +1,939 @@
+import { defineComponent as dt, inject as Vt, useTemplateRef as et, reactive as A, ref as st, computed as S, onMounted as kt, nextTick as ut, onBeforeUnmount as Dt, watch as at, openBlock as R, createElementBlock as N, normalizeStyle as it, normalizeClass as ot, unref as U, withDirectives as Et, withKeys as lt, createElementVNode as ct, provide as _t, toDisplayString as Ot, createVNode as bt, Fragment as tt, createBlock as Bt, renderList as Rt } from "vue";
+import { C as d } from "./base-fr2I80sU.js";
+import { C as ft } from "./index-B477PjJ3.js";
+import { D as Ct } from "./drag-BBk0X740.js";
+import { t as xt, a as Tt } from "./index-C91QEnIE.js";
+/* empty css                   */
+const Lt = ["id"], Pt = /* @__PURE__ */ dt({
+  name: "ClSliderBar",
+  __name: "Bar",
+  props: {
+    id: String,
+    // desc: 唯一标识
+    className: String,
+    // desc: 自定义CSS类名
+    left: {
+      type: Number,
+      default: 0
+      // desc: 进度条起始位置百分比
+    },
+    width: {
+      type: Number,
+      default: 0
+      // desc: 进度条宽度百分比
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+      // desc: 是否禁用
+    },
+    isVertical: {
+      type: Boolean,
+      default: !1
+      // desc: 是否垂直模式
+    },
+    isBarDrag: {
+      type: Boolean,
+      default: !1
+      // desc: 是否可拖拽进度条
+    }
+  },
+  emits: {
+    // desc: 拖拽开始回调
+    onMoveStart: () => !0,
+    // desc: 拖拽中回调；payload: ratio 当前百分比
+    onMoveIng: (l) => !0,
+    // desc: 拖拽结束回调
+    onMoveEnd: () => !0,
+    // desc: 鼠标移入回调
+    onMouseover: () => !0,
+    // desc: 鼠标移出回调
+    onMouseout: () => !0,
+    // desc: 点击回调
+    onClick: (l) => !0
+  },
+  setup(l, { emit: O }) {
+    const m = l, i = O, T = Vt("$SliderTop"), E = et("refElBar"), H = m.id, y = A({
+      left: m.left
+    }), b = A({
+      isClick: !1,
+      isDragging: !1,
+      dragStart: 0,
+      dragStartRatio: 0
+    }), f = st(null), p = S(() => {
+      let v = {
+        "slider-bar": !0,
+        // slider-bar-drag 供外部消费者自定义拖拽态样式，组件 CSS 中无对应规则
+        "slider-bar-drag": m.isBarDrag
+      };
+      return v = d.getJsonMerge(v, ft.getClassNameJson(m.className)), v;
+    }), C = S(() => {
+      const v = {};
+      return m.isVertical ? (v.bottom = `${y.left}%`, v.height = `${m.width}%`) : (v.left = `${y.left}%`, v.width = `${m.width}%`), v;
+    }), V = (v, k) => {
+      k && (b.isClick = !0, b.isDragging = !1, b.dragStart = m.isVertical ? k.clientY : k.clientX, b.dragStartRatio = m.left, i("onMoveStart"));
+    }, r = (v, k) => {
+      if (!T || !k)
+        return;
+      b.isClick = !1, b.isDragging = !0;
+      let w = 0;
+      m.isVertical ? w = b.dragStart - k.clientY : w = k.clientX - b.dragStart;
+      const P = T.getDragValueInfo(w, b.dragStartRatio);
+      y.left = P.ratio, i("onMoveIng", P.ratio);
+    }, h = (v) => {
+      b.isClick ? i("onClick", v) : i("onMoveEnd"), b.isClick = !1, b.isDragging = !1;
+    }, L = () => {
+      if (!E.value)
+        return;
+      const v = {
+        start(k, w, P) {
+          let I = !1;
+          return !m.disabled && m.isBarDrag && P && (I = !0, V(k, w)), I;
+        },
+        ing: (k, w) => {
+          r(k, w);
+        },
+        end: (k) => {
+          h(k);
+        }
+      };
+      f.value = new Ct(E.value, v);
+    };
+    kt(() => {
+      ut(() => {
+        L();
+      });
+    }), Dt(() => {
+      f.value && (f.value.end(), f.value = null);
+    }), at(
+      () => m.left,
+      (v, k) => {
+        v !== k && v !== y.left && (y.left = v);
+      }
+    );
+    const $ = (v) => {
+      !m.disabled && !m.isBarDrag && i("onClick", v);
+    }, J = () => {
+      i("onMouseover");
+    }, z = () => {
+      b.isDragging || i("onMouseout");
+    };
+    return (v, k) => (R(), N("div", {
+      ref_key: "refElBar",
+      ref: E,
+      id: U(H),
+      class: ot(p.value),
+      style: it(C.value),
+      onMouseover: J,
+      onMouseout: z,
+      onClick: $
+    }, null, 46, Lt));
+  }
+}), At = ["id", "aria-label", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-disabled", "aria-orientation"], yt = /* @__PURE__ */ dt({
+  name: "ClSliderButton",
+  __name: "Button",
+  props: {
+    id: String,
+    // desc: 唯一标识
+    value: [String, Number],
+    // desc: 当前值
+    className: String,
+    // desc: 自定义CSS类名
+    ratio: {
+      type: Number,
+      default: 0
+      // desc: 当前位置百分比(0-100)
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+      // desc: 是否禁用
+    },
+    isVertical: {
+      type: Boolean,
+      default: !1
+      // desc: 是否垂直模式
+    },
+    tooltipFormat: String,
+    // desc: Tooltip 格式化模板
+    btnType: {
+      type: String,
+      default: "",
+      // desc: 按钮身份，range 模式下用于区分起止滑块 | enum: start, end, 空(单值模式)
+      validator: (l) => ["", "start", "end"].includes(l)
+    },
+    min: {
+      type: Number,
+      default: 0
+      // desc: 最小值（用于 aria-valuemin，需与顶层 Slider 一致）
+    },
+    max: {
+      type: Number,
+      default: 100
+      // desc: 最大值（用于 aria-valuemax，需与顶层 Slider 一致）
+    },
+    ariaLabel: String
+    // desc: 无障碍标签，未传时按 btnType 生成默认文案
+  },
+  emits: {
+    // desc: 拖拽/键盘移动中回调；payload: { value: number, runType: 'drag' | 'keydown' }
+    onMoveIng: (l) => !0,
+    // desc: 拖拽/键盘移动结束回调；payload: { runType: 'drag' | 'keydown' }
+    onMoveEnd: (l) => !0,
+    // desc: 双击回调
+    onDblClick: () => !0
+  },
+  setup(l, { expose: O, emit: m }) {
+    const i = l, T = m, E = Vt("$SliderTop"), H = xt, y = et("refElButton"), b = i.id, f = A({
+      isHover: !1,
+      ratio: i.ratio,
+      value: i.value
+    }), p = A({
+      dragStart: 0,
+      dragStartRatio: 0,
+      isMoveIng: !1
+    }), C = st(null), V = S(() => {
+      let s = f.value;
+      if (s != null) {
+        const c = i.tooltipFormat;
+        s = d.getFormatThousands(s.toString()), d.isNonEmptyString(c) && (s = d.convertStringFormat(c, { _value: s }));
+      }
+      return s ?? "";
+    }), r = S(() => i.isVertical ? "right" : "top"), h = S(() => d.isNonEmptyString(i.ariaLabel) ? i.ariaLabel : i.btnType === "start" ? "最小值" : i.btnType === "end" ? "最大值" : "滑块"), L = S(() => {
+      const s = Number(i.value);
+      return d.isFinite(s) ? s : i.min;
+    }), $ = S(() => {
+      let s = {
+        "slider-button": !0,
+        hover: f.isHover
+      };
+      return s = d.getJsonMerge(s, ft.getClassNameJson(i.className)), s;
+    }), J = S(() => {
+      const s = {}, c = f.ratio;
+      return i.isVertical ? s.bottom = `${d.isFinite(c) ? c : 0}%` : s.left = `${d.isFinite(c) ? c : 0}%`, s;
+    }), z = () => {
+      y.value && Tt.show(y.value);
+    }, v = () => {
+      y.value && Tt.hide(y.value);
+    }, k = (s, c) => {
+      if (!E || !c)
+        return { ratio: f.ratio, value: f.value };
+      let x = 0;
+      i.isVertical ? x = p.dragStart - c.clientY : x = c.clientX - p.dragStart;
+      const F = E.getDragValueInfo(x, p.dragStartRatio);
+      return f.ratio = F.ratio, f.value = F.value, F;
+    }, w = (s, c) => {
+      c && (p.dragStart = i.isVertical ? c.clientY : c.clientX, p.dragStartRatio = i.ratio);
+    }, P = (s, c) => {
+      const x = k(s, c);
+      z(), T("onMoveIng", { value: x.ratio, runType: "drag" });
+    }, I = (s, c) => {
+      k(s, c), f.isHover || y.value === s.target || y.value?.contains(s.target) || v(), T("onMoveEnd", { runType: "drag" });
+    }, W = (s) => {
+      if (!E)
+        return;
+      p.isMoveIng = !0;
+      const c = E.getButtonMoveValueInfo(s, i.ratio);
+      f.ratio = c.ratio, f.value = c.value, T("onMoveIng", { value: c.ratio, runType: "keydown" });
+    }, D = () => {
+      if (!y.value)
+        return;
+      const s = {
+        start(c, x, F) {
+          let rt = !1;
+          return !i.disabled && F && (rt = !0, w(c, x)), rt;
+        },
+        ing: (c, x) => {
+          P(c, x);
+        },
+        end: (c, x) => {
+          I(c, x);
+        }
+      };
+      C.value = new Ct(y.value, s);
+    };
+    kt(() => {
+      ut(() => {
+        D();
+      });
+    }), Dt(() => {
+      C.value && (C.value.end(), C.value = null), p.isMoveIng = !1;
+    }), at(
+      () => i.value,
+      (s, c) => {
+        s !== c && s !== f.value && (f.value = s);
+      }
+    ), at(
+      () => i.ratio,
+      (s, c) => {
+        s !== c && s !== f.ratio && (f.ratio = s);
+      }
+    );
+    const G = (s) => {
+      i.disabled || (s.preventDefault(), s.stopPropagation(), W("left"));
+    }, Q = (s) => {
+      i.disabled || (s.preventDefault(), s.stopPropagation(), W("right"));
+    }, nt = () => {
+      i.disabled || (f.isHover = !0);
+    }, Z = () => {
+      i.disabled || (f.isHover = !1, p.isMoveIng && (p.isMoveIng = !1, T("onMoveEnd", { runType: "keydown" })));
+    }, X = () => {
+      i.disabled || T("onDblClick");
+    };
+    return O({
+      showTooltip: () => {
+        z();
+      },
+      hideTooltip: () => {
+        v();
+      }
+    }), (s, c) => Et((R(), N("div", {
+      ref_key: "refElButton",
+      ref: y,
+      id: U(b),
+      class: ot($.value),
+      style: it(J.value),
+      tabindex: "0",
+      role: "slider",
+      "aria-label": h.value,
+      "aria-valuemin": l.min,
+      "aria-valuemax": l.max,
+      "aria-valuenow": L.value,
+      "aria-disabled": l.disabled ? "true" : void 0,
+      "aria-orientation": l.isVertical ? "vertical" : "horizontal",
+      onDblclick: X,
+      onFocus: nt,
+      onBlur: Z,
+      onKeydown: [
+        lt(G, ["down"]),
+        lt(Q, ["up"]),
+        lt(G, ["left"]),
+        lt(Q, ["right"])
+      ]
+    }, [...c[0] || (c[0] = [
+      ct("div", { class: "slider-button-icon" }, null, -1)
+    ])], 46, At)), [
+      [
+        U(H),
+        {
+          trigger: ["hover", "focus"],
+          position: r.value,
+          html: V.value,
+          updRefreshInx: f.ratio
+        },
+        void 0,
+        { black: !0 }
+      ]
+    ]);
+  }
+}), Jt = ["id"], zt = /* @__PURE__ */ dt({
+  name: "ClSliderDot",
+  __name: "Dot",
+  props: {
+    id: String,
+    // desc: 唯一标识
+    className: String,
+    // desc: 自定义CSS类名
+    itemInfo: {
+      type: Object,
+      default: () => ({})
+      // desc: 刻度点数据
+    },
+    isHover: {
+      type: Boolean,
+      default: !1
+      // desc: 是否悬停状态
+    },
+    isVertical: {
+      type: Boolean,
+      default: !1
+      // desc: 是否垂直模式
+    },
+    isTooltip: {
+      type: Boolean,
+      default: !0
+      // desc: 是否启用 Tooltip
+    },
+    tooltipFormat: String
+    // desc: Tooltip 格式化模板
+  },
+  emits: {
+    // desc: 鼠标移入回调
+    onMouseover: () => !0,
+    // desc: 鼠标移出回调
+    onMouseout: () => !0,
+    // desc: 点击回调
+    onClick: (l) => !0
+  },
+  setup(l, { emit: O }) {
+    const m = l, i = O, T = m.id, E = xt, H = S(() => m.isVertical ? "right" : "top"), y = S(() => {
+      const r = m.itemInfo.value;
+      if (r != null) {
+        let h = d.getFormatThousands(r.toString());
+        const L = m.tooltipFormat;
+        return d.isNonEmptyString(L) && (h = d.convertStringFormat(L, { _value: h })), h;
+      }
+      return "";
+    }), b = S(() => {
+      let r = {
+        "slider-dot": !0,
+        "slider-dot-active": m.itemInfo.isActive ?? !1,
+        "slider-dot-hide": m.itemInfo.isHide ?? !1,
+        hover: m.isHover
+      };
+      return r = d.getJsonMerge(r, ft.getClassNameJson(m.className)), r;
+    }), f = S(() => {
+      const r = {}, h = m.itemInfo.ratio;
+      return h != null && (m.isVertical ? r.bottom = `${h}%` : r.left = `${h}%`), r;
+    }), p = () => {
+      i("onMouseover");
+    }, C = () => {
+      i("onMouseout");
+    }, V = () => {
+      i("onClick");
+    };
+    return (r, h) => Et((R(), N("div", {
+      id: U(T),
+      class: ot(b.value),
+      style: it(f.value),
+      onMouseover: p,
+      onMouseout: C,
+      onClick: V
+    }, [...h[0] || (h[0] = [
+      ct("div", { class: "slider-dot-icon" }, null, -1)
+    ])], 46, Jt)), [
+      [
+        U(E),
+        { init: l.isTooltip, position: H.value, html: y.value },
+        void 0,
+        {
+          black: !0,
+          hover: !0
+        }
+      ]
+    ]);
+  }
+}), jt = ["id"], Kt = ["id"], Ut = { class: "slider-container" }, Wt = {
+  key: 2,
+  class: "slider-dots"
+}, qt = {
+  key: 0,
+  class: "slider-marks"
+}, Gt = ["innerHTML", "onMouseover"], ie = /* @__PURE__ */ dt({
+  name: "ClSlider",
+  __name: "Index",
+  props: {
+    id: String,
+    // desc: 唯一标识
+    className: String,
+    // desc: 自定义CSS类名
+    disabled: {
+      type: Boolean,
+      default: !1
+      // desc: 是否禁用
+    },
+    value: [String, Number],
+    // desc: 当前值（range 模式用逗号分隔如 "10,50"）
+    min: {
+      type: Number,
+      default: 0
+      // desc: 最小值
+    },
+    max: {
+      type: Number,
+      default: 100
+      // desc: 最大值
+    },
+    isRange: {
+      type: Boolean,
+      default: !1
+      // desc: 是否为范围选择模式
+    },
+    isBarDrag: {
+      type: Boolean,
+      default: !1
+      // desc: 是否可拖拽进度条
+    },
+    splitNumber: {
+      type: Number,
+      default: 0
+      // desc: 刻度分段数（0 表示不显示）
+    },
+    isShowDot: {
+      type: Boolean,
+      default: !0
+      // desc: 是否显示刻度点
+    },
+    isShowDotActive: {
+      type: Boolean,
+      default: !0
+      // desc: 激活的刻度点是否显示
+    },
+    marks: {
+      type: Array,
+      default: () => []
+      // desc: 标记列表 [{ value, mark }]
+    },
+    isVertical: {
+      type: Boolean,
+      default: !1
+      // desc: 是否垂直模式
+    },
+    verticalHeight: String,
+    // desc: 垂直模式高度（CSS值）
+    size: {
+      type: String,
+      default: "large"
+      // desc: 尺寸 | enum: large, small (可自定义)
+    },
+    numType: {
+      type: String,
+      default: "int",
+      // desc: 数值精度 | enum: int, float2, float3
+      validator: (l) => ["int", "float2", "float3"].indexOf(l) > -1
+    },
+    tooltipFormat: String,
+    // desc: Tooltip 格式化模板（如 ${_value}%）
+    isPlaintext: {
+      type: Boolean,
+      default: !1
+      // desc: 是否纯文本只读模式，只渲染当前值文本不挂载滑块
+    },
+    plaintextSeparator: {
+      type: String,
+      default: " - "
+      // desc: 纯文本模式下范围模式起止值的分隔符
+    },
+    ariaLabel: String
+    // desc: 滑块无障碍标签，未传时按 btnType 生成默认文案（最小值/最大值/滑块）
+  },
+  emits: {
+    // desc: 值变更双向绑定事件；payload: string（range模式为 "start,end"）
+    "update:value": (l) => !0,
+    "update:modelValue": (l) => !0,
+    // desc: 标准 v-model 支持（等价 update:value）
+    // desc: 值变更回调；payload: (value: string, detail: { start: number, end: number })
+    onChange: (l, O) => !0
+  },
+  setup(l, { expose: O, emit: m }) {
+    const i = l, T = m, E = `slider-${d.getRandom(5)}`, H = et("refElTrack"), y = et("refBtnStart"), b = et("refBtnEnd"), f = i.id, p = A({
+      track: void 0,
+      bar: void 0,
+      btnStart: void 0,
+      btnEnd: void 0,
+      dots: void 0,
+      marks: void 0
+    });
+    d.isNonEmptyString(f) && (p.track = `${f}-track`, p.bar = `${f}-bar`, p.btnStart = `${f}-btn-start`, p.btnEnd = `${f}-btn-end`, p.dots = `${f}-dots`, p.marks = `${f}-marks`);
+    const C = A({
+      markHoverIndex: -1
+    }), V = A({
+      left: 0,
+      width: 0
+    }), r = A({
+      start: i.min,
+      end: i.min,
+      startRatio: 0,
+      endRatio: 0
+    }), h = (e) => {
+      const t = i.tooltipFormat;
+      return d.isNonEmptyString(t) ? d.convertStringFormat(t, { _value: e }) : e.toString();
+    }, L = S(() => {
+      if (!i.isRange)
+        return h(r.end);
+      const e = d.isString(i.plaintextSeparator) ? i.plaintextSeparator : " - ";
+      return `${h(r.start)}${e}${h(r.end)}`;
+    }), $ = st([]), J = st([]), z = S(() => Math.abs(i.max - i.min)), v = S(() => i.marks.length > 0), k = S(() => {
+      const { isRange: e, isBarDrag: t } = i;
+      let a = !1;
+      return e && (a = t), a;
+    }), w = S(() => {
+      let e = {
+        "panel-slider": !0,
+        "slider-disabled": i.disabled,
+        "slider-vertical": i.isVertical,
+        "slider-level": !i.isVertical
+      }, t = i.size;
+      return d.isEmpty(t) && (t = "large"), e[`slider-${t}`] = !0, e = d.getJsonMerge(e, ft.getClassNameJson(i.className)), e;
+    }), P = S(() => {
+      const e = {};
+      return i.isVertical && d.isNonEmptyString(i.verticalHeight) && (e.height = i.verticalHeight), e;
+    }), I = (e, t = 2) => d.isFinite(e) ? Number((e * 100).toFixed(t)) : 0, W = (e) => {
+      const t = z.value;
+      return t > 0 ? I((e - i.min) / t) : 0;
+    }, D = (e) => {
+      let t = 0;
+      if (e <= 0)
+        t = i.min;
+      else if (e >= 100)
+        t = i.max;
+      else {
+        const { numType: a } = i, n = z.value * e / 100, u = d.getValueByFormat(n.toString(), a, { isThousands: !1 });
+        if (t = i.min + Number(u), d.isExistValue(["float2", "float3"], a)) {
+          const g = Number(a.replace("float", "")), M = t.toString();
+          d.isExistValue(M, ".") && M.split(".")[1].length > g && (t = Number(t.toFixed(g)));
+        }
+      }
+      return t;
+    }, G = (e) => {
+      let t = Number(e), a = !0;
+      return d.isFinite(t) ? t <= i.min ? (t = i.min, a = !1) : t >= i.max && (t = i.max, a = !1) : (t = i.min, a = !1), { value: t, check: a };
+    }, Q = () => {
+      if (v.value) {
+        const e = [];
+        i.marks.forEach((t) => {
+          if (!t)
+            return;
+          const a = d.getJsonClone(t);
+          a.value = Number(a.value), d.isFinite(a.value) && (a.ratio = W(a.value), d.isString(a.mark) ? a.safeMark = d.isHtml(a.mark) ? d.encodeHTML(a.mark) : a.mark : a.safeMark = "", e.push(a));
+        }), e.sort((t, a) => t.value - a.value), J.value = e;
+      }
+    }, nt = () => {
+      const e = [];
+      if (v.value)
+        J.value.forEach((t) => {
+          e.push({ ratio: t.ratio, value: t.value, isActive: !1, isHide: !1 });
+        });
+      else if (i.splitNumber > 1) {
+        const t = 100 / i.splitNumber, a = t / 2;
+        for (let o = 1; o < i.splitNumber; o++) {
+          const n = t * o, u = D(n);
+          e.push({
+            value: u,
+            ratio: I(n / 100),
+            isActive: !1,
+            isHide: !1,
+            left: I((n - a) / 100),
+            right: I((n + a) / 100)
+          });
+        }
+      }
+      $.value = e;
+    }, Z = () => {
+      if ($.value.length > 0) {
+        const { isShowDot: e, isShowDotActive: t, min: a, max: o } = i, n = v.value, u = V.left, g = u + V.width, M = [];
+        $.value.forEach((B) => {
+          const j = d.getJsonClone(B), _ = B.ratio >= u && B.ratio <= g;
+          j.isActive = _;
+          let K = !1;
+          n ? K = !0 : e ? (K = !0, _ && (t ? K = !0 : K = !1)) : K = !1, (B.value === a || B.value === o) && (K = !1), j.isHide = !K, M.push(j);
+        }), $.value = M;
+      }
+    }, X = (e) => {
+      const t = e.startRatio > e.endRatio ? e.endRatio : e.startRatio, a = Math.abs(e.endRatio - e.startRatio);
+      V.left = t, V.width = a;
+    }, q = (e) => {
+      ut(() => {
+        i.isRange ? e ? (y.value?.showTooltip(), b.value?.showTooltip()) : (y.value?.hideTooltip(), b.value?.hideTooltip()) : e ? b.value?.showTooltip() : b.value?.hideTooltip();
+      });
+    }, Y = (e) => {
+      X(e), r.start = e.start, r.end = e.end, r.startRatio = e.startRatio, r.endRatio = e.endRatio, Z();
+    }, s = (e) => {
+      let t, a;
+      if (e && !d.isEmpty(e)) {
+        const u = e.toString();
+        if (u === "")
+          t = i.min, a = i.min;
+        else {
+          const g = u.split(","), M = G(g[0]);
+          if (i.isRange) {
+            if (t = M.value, a = t, g.length > 1) {
+              const B = G(g[1]);
+              B.value > t && (a = B.value);
+            }
+          } else
+            t = i.min, a = M.value;
+        }
+      } else
+        t = i.min, a = i.min;
+      const o = W(t), n = W(a);
+      Y({ start: t, end: a, startRatio: o, endRatio: n });
+    }, c = (e) => {
+      if (!d.isFinite(e))
+        return 0;
+      let t = I(e);
+      const a = $.value;
+      if (!v.value && a.length > 0) {
+        if (t < a[0].left)
+          t = 0;
+        else if (t > a[a.length - 1].right)
+          t = 100;
+        else
+          for (let o = 0; o < a.length; o++)
+            if (t >= a[o].left && t <= a[o].right) {
+              t = a[o].ratio;
+              break;
+            }
+      }
+      return t;
+    }, x = (e) => {
+      const t = c(e), a = D(t);
+      let { start: o, startRatio: n, end: u, endRatio: g } = r, M = "";
+      if (i.isRange)
+        if (t <= n)
+          M = "start";
+        else if (t >= g)
+          M = "end";
+        else {
+          const B = (g - n) / 2;
+          t > n && t <= n + B ? M = "start" : t >= g - B && t < g && (M = "end");
+        }
+      else
+        M = "end";
+      switch (M) {
+        case "start":
+          o = a, n = t;
+          break;
+        case "end":
+          u = a, g = t;
+          break;
+      }
+      return { start: o, end: u, startRatio: n, endRatio: g };
+    }, F = (e) => {
+      const t = e?.start ?? r.start, a = e?.end ?? r.end;
+      let o = t, n = a;
+      o > n && (o = a, n = t);
+      const u = i.isRange ? `${o},${n}` : n.toString();
+      T("update:value", u), T("update:modelValue", u), T("onChange", u, { start: o, end: n });
+    }, rt = (e) => {
+      if (!e)
+        return {};
+      const t = {};
+      return i.isVertical ? t.bottom = `${e.ratio}%` : t.left = `${e.ratio}%`, d.isEmpty(e.color) || (t.color = e.color), t;
+    }, Nt = () => {
+      Q(), nt(), s(i.value);
+    };
+    kt(() => {
+      ut(() => {
+        Nt();
+      });
+    }), at(
+      () => i.value,
+      (e, t) => {
+        if (e !== t) {
+          let a = !0;
+          const o = e != null ? e.toString() : "";
+          if (o === "")
+            a = !0;
+          else {
+            const n = o.split(","), u = Number(n[0]);
+            if (i.isRange) {
+              const g = n.length > 1 ? Number(n[1]) : u;
+              (u === r.start && g === r.end || u === r.end && g === r.start) && (a = !1);
+            } else
+              a = u !== r.end;
+          }
+          a && s(e);
+        }
+      },
+      { immediate: !0 }
+    ), at(
+      () => i.marks,
+      () => {
+        Q(), nt();
+      }
+    );
+    const vt = (e) => {
+      if (!i.disabled && e) {
+        e.preventDefault(), e.stopPropagation();
+        const t = H.value;
+        if (!t)
+          return;
+        const a = t.getBoundingClientRect(), o = i.isVertical ? (a.bottom - e.clientY) / t.clientHeight : (e.clientX - a.left) / t.clientWidth;
+        if (!d.isFinite(o))
+          return;
+        const n = x(o);
+        Y(n), F(n);
+      }
+    }, mt = (e, t) => {
+      let { startRatio: a, endRatio: o } = r;
+      const n = e.value;
+      t === "start" ? (a = n, r.start = D(n), r.startRatio = n) : (o = n, r.end = D(n), r.endRatio = n), X({ startRatio: a, endRatio: o }), Z(), e.runType === "keydown" && F();
+    }, gt = (e) => {
+      const { left: t, width: a } = V, o = {
+        startRatio: t,
+        endRatio: t + a
+      };
+      o.start = D(o.startRatio), o.end = D(o.endRatio), Y(o), e.runType === "drag" && F(o);
+    }, ht = (e) => {
+      if (i.isRange) {
+        let { start: t, startRatio: a, end: o, endRatio: n } = r;
+        e === "start" ? (n = a, o = t) : (a = n, t = o);
+        const u = { start: t, startRatio: a, end: o, endRatio: n };
+        Y(u), F(u);
+      }
+    }, $t = () => {
+      q(!0);
+    }, wt = (e) => {
+      const t = e;
+      r.start = D(e), r.startRatio = e;
+      const a = e + V.width;
+      r.end = D(a), r.endRatio = a, X({ startRatio: t, endRatio: a }), Z(), q(!0);
+    }, Ft = () => {
+      F(), q(!1);
+    }, It = () => {
+      q(!0);
+    }, Ht = () => {
+      q(!1);
+    }, St = (e) => {
+      v.value && (C.markHoverIndex = e);
+    }, Mt = () => {
+      C.markHoverIndex = -1;
+    }, pt = () => i.isRange ? `${r.start},${r.end}` : r.end.toString();
+    return O({
+      getValue: pt,
+      getValueData: () => ({
+        value: pt(),
+        show: pt()
+      })
+    }), _t("$SliderTop", {
+      getDragValueInfo: (e, t) => {
+        const a = H.value;
+        if (!a)
+          return { ratio: t / 100, value: D(t / 100) };
+        const o = i.isVertical ? a.clientHeight : a.clientWidth;
+        if (o <= 0)
+          return { ratio: t / 100, value: D(t / 100) };
+        const n = e / o;
+        let u = t / 100 + n;
+        u >= 1 ? u = 1 : u <= 0 && (u = 0), u = c(u);
+        const g = D(u);
+        return { ratio: u, value: g };
+      },
+      getButtonMoveValueInfo: (e, t) => {
+        const a = e === "left" ? -1 : 1, o = Number(t);
+        let n;
+        const u = $.value, g = u.length;
+        if (!v.value && g > 0) {
+          let B = -1;
+          if (o < u[0].ratio)
+            B = -1;
+          else if (o > u[g - 1].ratio)
+            B = g;
+          else
+            for (let _ = 0; _ < g; _++)
+              if (o >= u[_].ratio && _ + 1 < g && o < u[_ + 1].ratio) {
+                B = _;
+                break;
+              }
+          const j = B + a;
+          j < 0 ? n = 0 : j >= g ? n = 100 : n = u[j].ratio;
+        } else
+          n = o + a;
+        n >= 100 ? n = 100 : n <= 0 && (n = 0);
+        const M = D(n);
+        return { ratio: n, value: M };
+      }
+    }), (e, t) => l.isPlaintext ? (R(), N("div", {
+      key: 0,
+      id: U(f),
+      class: "cl-plaintext-value"
+    }, Ot(L.value), 9, jt)) : (R(), N("div", {
+      key: 1,
+      id: U(f),
+      class: ot(w.value),
+      style: it(P.value)
+    }, [
+      ct("div", Ut, [
+        ct("div", {
+          ref_key: "refElTrack",
+          ref: H,
+          class: "slider-track",
+          onClick: vt
+        }, null, 512),
+        bt(Pt, {
+          id: p.bar,
+          disabled: l.disabled,
+          isVertical: l.isVertical,
+          isBarDrag: k.value,
+          left: V.left,
+          width: V.width,
+          onOnMoveStart: $t,
+          onOnMoveIng: wt,
+          onOnMoveEnd: Ft,
+          onOnClick: vt,
+          onOnMouseover: It,
+          onOnMouseout: Ht
+        }, null, 8, ["id", "disabled", "isVertical", "isBarDrag", "left", "width"]),
+        l.isRange ? (R(), N(tt, { key: 0 }, [
+          bt(yt, {
+            ref_key: "refBtnStart",
+            ref: y,
+            id: p.btnStart,
+            disabled: l.disabled,
+            isVertical: l.isVertical,
+            value: r.start,
+            ratio: r.startRatio,
+            tooltipFormat: l.tooltipFormat,
+            ariaLabel: l.ariaLabel,
+            btnType: "start",
+            min: l.min,
+            max: l.max,
+            onOnMoveIng: t[0] || (t[0] = (a) => mt(a, "start")),
+            onOnMoveEnd: gt,
+            onOnDblClick: t[1] || (t[1] = (a) => ht("start"))
+          }, null, 8, ["id", "disabled", "isVertical", "value", "ratio", "tooltipFormat", "ariaLabel", "min", "max"]),
+          bt(yt, {
+            ref_key: "refBtnEnd",
+            ref: b,
+            id: p.btnEnd,
+            disabled: l.disabled,
+            isVertical: l.isVertical,
+            value: r.end,
+            ratio: r.endRatio,
+            tooltipFormat: l.tooltipFormat,
+            ariaLabel: l.ariaLabel,
+            btnType: "end",
+            min: l.min,
+            max: l.max,
+            onOnMoveIng: t[2] || (t[2] = (a) => mt(a, "end")),
+            onOnMoveEnd: gt,
+            onOnDblClick: t[3] || (t[3] = (a) => ht("end"))
+          }, null, 8, ["id", "disabled", "isVertical", "value", "ratio", "tooltipFormat", "ariaLabel", "min", "max"])
+        ], 64)) : (R(), Bt(yt, {
+          key: 1,
+          ref_key: "refBtnEnd",
+          ref: b,
+          id: p.btnEnd,
+          disabled: l.disabled,
+          isVertical: l.isVertical,
+          value: r.end,
+          ratio: r.endRatio,
+          tooltipFormat: l.tooltipFormat,
+          ariaLabel: l.ariaLabel,
+          min: l.min,
+          max: l.max,
+          onOnMoveIng: t[4] || (t[4] = (a) => mt(a, "end")),
+          onOnMoveEnd: gt
+        }, null, 8, ["id", "disabled", "isVertical", "value", "ratio", "tooltipFormat", "ariaLabel", "min", "max"])),
+        $.value.length > 0 ? (R(), N("div", Wt, [
+          (R(!0), N(tt, null, Rt($.value, (a, o) => (R(), Bt(zt, {
+            key: `${E}-dot-${o}`,
+            id: p.dots ? `${p.dots}-${o}` : void 0,
+            isVertical: l.isVertical,
+            itemInfo: a,
+            isHover: C.markHoverIndex === o,
+            isTooltip: !v.value,
+            tooltipFormat: l.tooltipFormat,
+            onOnMouseover: (n) => St(o),
+            onOnMouseout: Mt,
+            onOnClick: vt
+          }, null, 8, ["id", "isVertical", "itemInfo", "isHover", "isTooltip", "tooltipFormat", "onOnMouseover"]))), 128))
+        ])) : (R(), N(tt, { key: 3 }, [], 64))
+      ]),
+      v.value ? (R(), N("div", qt, [
+        (R(!0), N(tt, null, Rt(J.value, (a, o) => (R(), N("div", {
+          key: `${E}-mark-${o}`,
+          class: ot({ "slider-mark": !0, hover: C.markHoverIndex === o }),
+          style: it(rt(a)),
+          innerHTML: a.safeMark,
+          onMouseover: (n) => St(o),
+          onMouseout: Mt
+        }, null, 46, Gt))), 128))
+      ])) : (R(), N(tt, { key: 1 }, [], 64))
+    ], 14, Kt));
+  }
+});
+export {
+  ie as _
+};