y-design-ssr 0.2.1 → 0.2.2

package/libs/progress/index.mjs

@@ -1,11 +1,40 @@
-import { ref as h, reactive as b, defineComponent as B, onMounted as E, onBeforeUpdate as _, onUnmounted as D, watch as P, nextTick as k, createVNode as d, Fragment as R } from "vue";
-const v = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((c, n) => c + v(e, n), "") : Object.keys(t).reduce(
-  (c, n) => c + (t[n] ? v(e, n) : ""),
-  ""
-) : "", L = (e) => (t, c) => {
-  let n = t, f = c;
-  return n && typeof n != "string" && (f = n, n = ""), n = n ? `${e}__${n}` : e, `${n}${v(n, f)}`;
-}, T = () => (e, t) => t ? `${v(`y-${e}`, t)}` : `y-${e}`, U = {
+import { ref, reactive, defineComponent, onMounted, onBeforeUpdate, onUnmounted, watch, nextTick, createVNode, Fragment } from "vue";
+const getMods = (el, mods) => {
+  if (!mods) {
+    return "";
+  }
+  if (typeof mods === "string") {
+    return ` ${el}--${mods}`;
+  }
+  if (Array.isArray(mods)) {
+    return mods.reduce((acc, cur) => acc + getMods(el, cur), "");
+  }
+  return Object.keys(mods).reduce(
+    (acc, cur) => acc + (mods[cur] ? getMods(el, cur) : ""),
+    ""
+  );
+};
+const createBEM = (block) => {
+  return (el, mods) => {
+    let _el = el;
+    let _mods = mods;
+    if (_el && typeof _el !== "string") {
+      _mods = _el;
+      _el = "";
+    }
+    _el = _el ? `${block}__${_el}` : block;
+    return `${_el}${getMods(_el, _mods)}`;
+  };
+};
+const createGlobalBem = () => {
+  return (el, mods) => {
+    if (!mods) {
+      return `y-${el}`;
+    }
+    return `${getMods(`y-${el}`, mods)}`;
+  };
+};
+const defaultLang = {
   "pull-refresh": {
     pulling: "下拉刷新...",
     loosing: "释放刷新...",
@@ -17,15 +46,23 @@ const v = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t)
     validateMessage: "请输入正确内容"
   }
 };
-h("zh-CN");
-b({
-  "zh-CN": U
+ref("zh-CN");
+reactive({
+  "zh-CN": defaultLang
 });
-const q = (e) => {
-  const t = `y-${e}`;
-  return [t, L(t), T()];
-}, x = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, [j, g] = q("progress"), $ = /* @__PURE__ */ B({
-  name: j,
+const createNamespace = (name2) => {
+  const prefixedName = `y-${name2}`;
+  return [prefixedName, createBEM(prefixedName), createGlobalBem()];
+};
+const parseUnit = (val) => {
+  if (isNaN(Number(val)) && typeof val === "string") {
+    return val;
+  }
+  return `${val}px`;
+};
+const [name, bem] = createNamespace("progress");
+const Progress = /* @__PURE__ */ defineComponent({
+  name,
   props: {
     // 进度
     percent: {
@@ -65,12 +102,12 @@ const q = (e) => {
     // 展示默认pivot
     defaultPivot: {
       type: Boolean,
-      default: !1
+      default: false
     },
     // 里程碑模式
     modeMilestone: {
       type: Boolean,
-      default: !1
+      default: false
     },
     // 里程碑节点
     mileages: {
@@ -80,7 +117,7 @@ const q = (e) => {
     // 动画
     animation: {
       type: Boolean,
-      default: !1
+      default: false
     },
     // 动画时长
     duration: {
@@ -98,147 +135,182 @@ const q = (e) => {
       default: "%"
     }
   },
-  setup(e, {
-    slots: t
+  setup(props, {
+    slots
   }) {
-    const c = h(null), n = h(null), f = h([]), m = b({
+    const progressRef = ref(null);
+    const pivotContentRef = ref(null);
+    const mileageRef = ref([]);
+    const widthData = reactive({
       progressWidth: 0,
       pivotContentWidth: 0,
       mileageWidth: []
-    }), i = b({
+    });
+    const growData = reactive({
       number: 0,
       oldPercent: 0,
       timer: 0
     });
-    E(() => {
-      y(), e.animation && W(), window.addEventListener("resize", y);
-    }), _(() => {
-      f.value = [];
-    }), D(() => {
-      i.timer && cancelAnimationFrame(i.timer), window.removeEventListener("resize", y);
-    }), P(() => e.percent, () => {
-      W(), w();
+    onMounted(() => {
+      resize();
+      props.animation && grow();
+      window.addEventListener("resize", resize);
+    });
+    onBeforeUpdate(() => {
+      mileageRef.value = [];
+    });
+    onUnmounted(() => {
+      growData.timer && cancelAnimationFrame(growData.timer);
+      window.removeEventListener("resize", resize);
+    });
+    watch(() => props.percent, () => {
+      grow();
+      resizeWidth();
     });
-    const W = () => {
+    const grow = () => {
       const {
-        duration: o,
-        percent: r
-      } = e, u = Math.abs(r - i.oldPercent) / (o / 16);
-      if (u === 0)
+        duration,
+        percent
+      } = props;
+      const step = Math.abs(percent - growData.oldPercent) / (duration / 16);
+      if (step === 0)
         return;
-      let a = Number(i.oldPercent);
-      const l = () => {
-        r > i.oldPercent ? a += u : a -= u, r > i.oldPercent && a > r || r < i.oldPercent && a < r ? a = r : i.timer = requestAnimationFrame(l), i.oldPercent = a, i.number = parseInt(a.toString());
+      let current = Number(growData.oldPercent);
+      const update = () => {
+        percent > growData.oldPercent ? current += step : current -= step;
+        if (percent > growData.oldPercent && current > percent || percent < growData.oldPercent && current < percent) {
+          current = percent;
+        } else {
+          growData.timer = requestAnimationFrame(update);
+        }
+        growData.oldPercent = current;
+        growData.number = parseInt(current.toString());
       };
-      i.timer && cancelAnimationFrame(i.timer), i.timer = requestAnimationFrame(l);
+      growData.timer && cancelAnimationFrame(growData.timer);
+      growData.timer = requestAnimationFrame(update);
+    };
+    watch(() => props.mileages, () => resizeMileage);
+    const resize = () => {
+      resizeWidth();
+      resizeMileage();
     };
-    P(() => e.mileages, () => C);
-    const y = () => {
-      w(), C();
-    }, w = () => {
-      k(() => {
-        m.progressWidth = c.value && c.value.offsetWidth || 0, m.pivotContentWidth = n.value && n.value.offsetWidth || 0;
-      }).catch((o) => {
-        throw new Error(o);
+    const resizeWidth = () => {
+      nextTick(() => {
+        widthData.progressWidth = progressRef.value && progressRef.value.offsetWidth || 0;
+        widthData.pivotContentWidth = pivotContentRef.value && pivotContentRef.value.offsetWidth || 0;
+      }).catch((e) => {
+        throw new Error(e);
       });
-    }, C = () => {
-      k(() => {
-        e.mileages.forEach((o, r) => {
-          m.mileageWidth[r] = f.value[r] && f.value[r].offsetWidth || 0;
+    };
+    const resizeMileage = () => {
+      nextTick(() => {
+        props.mileages.forEach((_, i) => {
+          widthData.mileageWidth[i] = mileageRef.value[i] && mileageRef.value[i].offsetWidth || 0;
         });
-      }).catch((o) => {
-        throw new Error(o);
+      }).catch((e) => {
+        throw new Error(e);
       });
-    }, M = () => {
-      var l;
+    };
+    const renderMileage = () => {
+      var _a;
       const {
-        mileages: o,
-        percent: r,
-        animation: u
-      } = e, a = [];
-      for (let s = 0; s < o.length; s++)
-        a[s] = d("div", {
-          ref: (p) => {
-            p && (f.value[s] = p);
+        mileages,
+        percent,
+        animation: animation2
+      } = props;
+      const doms = [];
+      for (let i = 0; i < mileages.length; i++) {
+        doms[i] = createVNode("div", {
+          "ref": (el) => {
+            if (el)
+              mileageRef.value[i] = el;
           },
-          class: [g("pivot-content", (u ? i.number : r) >= o[s] ? "arrive" : "no-arrive")],
-          key: `mileage${s}`,
-          style: {
-            left: `${(m.progressWidth - m.mileageWidth[s]) * o[s] / 100}px`
+          "class": [bem("pivot-content", (animation2 ? growData.number : percent) >= mileages[i] ? "arrive" : "no-arrive")],
+          "key": `mileage${i}`,
+          "style": {
+            left: `${(widthData.progressWidth - widthData.mileageWidth[i]) * mileages[i] / 100}px`
           }
-        }, [((l = t.mileage) == null ? void 0 : l.call(t)) || d("div", {
-          class: g("pivot")
-        }, [`${o[s]}%`])]);
-      return a;
-    }, S = () => {
-      var s;
+        }, [((_a = slots.mileage) == null ? void 0 : _a.call(slots)) || createVNode("div", {
+          "class": bem("pivot")
+        }, [`${mileages[i]}%`])]);
+      }
+      return doms;
+    };
+    const renderPivot = () => {
+      var _a;
       const {
-        defaultPivot: o,
-        textColor: r,
-        percent: u,
-        animation: a,
-        unit: l
-      } = e;
-      return d(R, null, [((s = t.pivot) == null ? void 0 : s.call(t)) || o && d("div", {
-        class: g("pivot"),
-        style: {
-          color: r
+        defaultPivot,
+        textColor,
+        percent,
+        animation: animation2,
+        unit
+      } = props;
+      return createVNode(Fragment, null, [((_a = slots.pivot) == null ? void 0 : _a.call(slots)) || defaultPivot && createVNode("div", {
+        "class": bem("pivot"),
+        "style": {
+          color: textColor
         }
-      }, [a ? d("div", {
-        class: g("number")
-      }, [d("span", null, [i.number, l])]) : `${u}${l}`])]);
+      }, [animation2 ? createVNode("div", {
+        "class": bem("number")
+      }, [createVNode("span", null, [growData.number, unit])]) : `${percent}${unit}`])]);
     };
     return () => {
       const {
-        strokeWidth: o,
-        trackColor: r,
-        radius: u,
-        percent: a,
-        color: l,
-        animation: s,
-        duration: p,
-        timing: N,
-        defaultPivot: z,
-        pivotColor: A,
-        modeMilestone: F
-      } = e;
-      return d("div", {
-        class: g(),
-        ref: c,
-        style: {
-          height: x(o),
-          background: r,
-          borderRadius: x(u)
+        strokeWidth,
+        trackColor,
+        radius,
+        percent,
+        color,
+        animation: animation2,
+        duration,
+        timing,
+        defaultPivot,
+        pivotColor,
+        modeMilestone
+      } = props;
+      return createVNode("div", {
+        "class": bem(),
+        "ref": progressRef,
+        "style": {
+          height: parseUnit(strokeWidth),
+          background: trackColor,
+          borderRadius: parseUnit(radius)
         }
-      }, [d("span", {
-        class: g("portion", {
-          animation: s
+      }, [createVNode("span", {
+        "class": bem("portion", {
+          animation: animation2
         }),
-        style: {
-          width: `${m.progressWidth * a / 100}px`,
-          background: l,
-          transitionDuration: `${p}ms`,
-          transitionTimingFunction: N
+        "style": {
+          width: `${widthData.progressWidth * percent / 100}px`,
+          background: color,
+          transitionDuration: `${duration}ms`,
+          transitionTimingFunction: timing
         }
-      }, [d("div", {
-        ref: n,
-        class: g("pivot-content", {
-          animation: s
+      }, [createVNode("div", {
+        "ref": pivotContentRef,
+        "class": bem("pivot-content", {
+          animation: animation2
         }),
-        style: {
-          left: `${(m.progressWidth - m.pivotContentWidth) * a / 100}px`,
-          background: z ? A || l : "none",
-          transitionDuration: `${p}ms`,
-          transitionTimingFunction: N
+        "style": {
+          left: `${(widthData.progressWidth - widthData.pivotContentWidth) * percent / 100}px`,
+          background: defaultPivot ? pivotColor || color : "none",
+          transitionDuration: `${duration}ms`,
+          transitionTimingFunction: timing
         }
-      }, [S()])]), F && M()]);
+      }, [renderPivot()])]), modeMilestone && renderMileage()]);
     };
   }
 });
-$.install = (e) => {
-  const { name: t } = $;
-  e.component(t, $);
+const reset = "";
+const libs = "";
+const font = "";
+const animation = "";
+const theme = "";
+const style = "";
+Progress.install = (Vue) => {
+  const { name: name2 } = Progress;
+  Vue.component(name2, Progress);
 };
 export {
-  $ as default
+  Progress as default
 };