y-design-ssr/libs/progress/index.mjs

SSR component library of YUI with Vue3

import { ref as h, reactive as $, defineComponent as F, onMounted as B, onBeforeUpdate as E, onUnmounted as _, watch as N, nextTick as P, createVNode as d, Fragment as D } from "vue";
const v = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((l, n) => l + v(e, n), "") : Object.keys(t).reduce(
  (l, n) => l + (t[n] ? v(e, n) : ""),
  ""
) : "", R = (e) => (t, l) => {
  let n = t, m = l;
  return n && typeof n != "string" && (m = n, n = ""), n = n ? `${e}__${n}` : e, `${n}${v(n, m)}`;
}, L = () => (e, t) => t ? `${v(`y-${e}`, t)}` : `y-${e}`, T = {
  "pull-refresh": {
    pulling: "下拉刷新...",
    loosing: "释放刷新...",
    loading: "数据加载中...",
    success: "数据已更新",
    failed: "数据跟新失败，请稍后再试"
  },
  "form-item": {
    validateMessage: "请输入正确内容"
  }
};
h("zh-CN");
$({
  "zh-CN": T
});
const U = (e) => {
  const t = `y-${e}`;
  return [t, R(t), L()];
}, k = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, [q, g] = U("progress"), I = /* @__PURE__ */ F({
  name: q,
  props: {
    // 进度
    percent: {
      type: Number,
      default: 0
    },
    // 轨道粗细
    strokeWidth: {
      type: [Number, String],
      default: ""
    },
    // 圆角
    radius: {
      type: [Number, String],
      default: ""
    },
    // 文案颜色
    textColor: {
      type: String,
      default: ""
    },
    // 进度条颜色
    color: {
      type: String,
      default: ""
    },
    // 轨道颜色
    trackColor: {
      type: String,
      default: ""
    },
    // pivot颜色
    pivotColor: {
      type: String,
      default: ""
    },
    // 展示默认pivot
    defaultPivot: {
      type: Boolean,
      default: !1
    },
    // 里程碑模式
    modeMilestone: {
      type: Boolean,
      default: !1
    },
    // 里程碑节点
    mileages: {
      type: Array,
      default: () => [50, 100]
    },
    // 动画
    animation: {
      type: Boolean,
      default: !1
    },
    // 动画时长
    duration: {
      type: Number,
      default: 1500
    },
    // 动画调速
    timing: {
      type: String,
      default: ""
    },
    // 单位
    unit: {
      type: String,
      default: "%"
    }
  },
  setup(e, {
    slots: t
  }) {
    const l = h(null), n = h(null), m = h([]), f = $({
      progressWidth: 0,
      pivotContentWidth: 0,
      mileageWidth: []
    }), i = $({
      number: 0,
      oldPercent: 0,
      timer: 0
    });
    B(() => {
      y(), e.animation && b(), window.addEventListener("resize", y);
    }), E(() => {
      m.value = [];
    }), _(() => {
      i.timer && cancelAnimationFrame(i.timer), window.removeEventListener("resize", y);
    }), N(() => e.percent, () => {
      b(), W();
    });
    const b = () => {
      const {
        duration: o,
        percent: r
      } = e, u = Math.abs(r - i.oldPercent) / (o / 16);
      if (u === 0)
        return;
      let a = Number(i.oldPercent);
      const c = () => {
        r > i.oldPercent ? a += u : a -= u, r > i.oldPercent && a > r || r < i.oldPercent && a < r ? a = r : i.timer = requestAnimationFrame(c), i.oldPercent = a, i.number = parseInt(a.toString());
      };
      i.timer && cancelAnimationFrame(i.timer), i.timer = requestAnimationFrame(c);
    };
    N(() => e.mileages, () => w);
    const y = () => {
      W(), w();
    }, W = () => {
      P(() => {
        f.progressWidth = l.value && l.value.offsetWidth || 0, f.pivotContentWidth = n.value && n.value.offsetWidth || 0;
      }).catch((o) => {
        throw new Error(o);
      });
    }, w = () => {
      P(() => {
        e.mileages.forEach((o, r) => {
          f.mileageWidth[r] = m.value[r] && m.value[r].offsetWidth || 0;
        });
      }).catch((o) => {
        throw new Error(o);
      });
    }, x = () => {
      var c;
      const {
        mileages: o,
        percent: r,
        animation: u
      } = e, a = [];
      for (let s = 0; s < o.length; s++)
        a[s] = d("div", {
          ref: (p) => {
            p && (m.value[s] = p);
          },
          class: [g("pivot-content", (u ? i.number : r) >= o[s] ? "arrive" : "no-arrive")],
          key: `mileage${s}`,
          style: {
            left: `${(f.progressWidth - f.mileageWidth[s]) * o[s] / 100}px`
          }
        }, [((c = t.mileage) == null ? void 0 : c.call(t)) || d("div", {
          class: g("pivot")
        }, [`${o[s]}%`])]);
      return a;
    }, M = () => {
      var s;
      const {
        defaultPivot: o,
        textColor: r,
        percent: u,
        animation: a,
        unit: c
      } = e;
      return d(D, null, [((s = t.pivot) == null ? void 0 : s.call(t)) || o && d("div", {
        class: g("pivot"),
        style: {
          color: r
        }
      }, [a ? d("div", {
        class: g("number")
      }, [d("span", null, [i.number, c])]) : `${u}${c}`])]);
    };
    return () => {
      const {
        strokeWidth: o,
        trackColor: r,
        radius: u,
        percent: a,
        color: c,
        animation: s,
        duration: p,
        timing: C,
        defaultPivot: S,
        pivotColor: z,
        modeMilestone: A
      } = e;
      return d("div", {
        class: g(),
        ref: l,
        style: {
          height: k(o),
          background: r,
          borderRadius: k(u)
        }
      }, [d("span", {
        class: g("portion", {
          animation: s
        }),
        style: {
          width: `${f.progressWidth * a / 100}px`,
          background: c,
          transitionDuration: `${p}ms`,
          transitionTimingFunction: C
        }
      }, [d("div", {
        ref: n,
        class: g("pivot-content", {
          animation: s
        }),
        style: {
          left: `${(f.progressWidth - f.pivotContentWidth) * a / 100}px`,
          background: S ? z || c : "none",
          transitionDuration: `${p}ms`,
          transitionTimingFunction: C
        }
      }, [M()])]), A && x()]);
    };
  }
});
function j(e) {
  const t = e;
  return t.install = (l) => {
    const { name: n } = e;
    n && l.component(n, e);
  }, t;
}
const O = j(I);
export {
  O as default
};