y-design-ssr 0.2.2 → 0.2.4

package/libs/progress/index.mjs

@@ -1,40 +1,11 @@
-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 = {
+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 = {
   "pull-refresh": {
     pulling: "下拉刷新...",
     loosing: "释放刷新...",
@@ -46,23 +17,15 @@ const defaultLang = {
     validateMessage: "请输入正确内容"
   }
 };
-ref("zh-CN");
-reactive({
-  "zh-CN": defaultLang
+h("zh-CN");
+b({
+  "zh-CN": U
 });
-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,
+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,
   props: {
     // 进度
     percent: {
@@ -102,12 +65,12 @@ const Progress = /* @__PURE__ */ defineComponent({
     // 展示默认pivot
     defaultPivot: {
       type: Boolean,
-      default: false
+      default: !1
     },
     // 里程碑模式
     modeMilestone: {
       type: Boolean,
-      default: false
+      default: !1
     },
     // 里程碑节点
     mileages: {
@@ -117,7 +80,7 @@ const Progress = /* @__PURE__ */ defineComponent({
     // 动画
     animation: {
       type: Boolean,
-      default: false
+      default: !1
     },
     // 动画时长
     duration: {
@@ -135,182 +98,147 @@ const Progress = /* @__PURE__ */ defineComponent({
       default: "%"
     }
   },
-  setup(props, {
-    slots
+  setup(e, {
+    slots: t
   }) {
-    const progressRef = ref(null);
-    const pivotContentRef = ref(null);
-    const mileageRef = ref([]);
-    const widthData = reactive({
+    const c = h(null), n = h(null), f = h([]), m = b({
       progressWidth: 0,
       pivotContentWidth: 0,
       mileageWidth: []
-    });
-    const growData = reactive({
+    }), i = b({
       number: 0,
       oldPercent: 0,
       timer: 0
     });
-    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();
+    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();
     });
-    const grow = () => {
+    const W = () => {
       const {
-        duration,
-        percent
-      } = props;
-      const step = Math.abs(percent - growData.oldPercent) / (duration / 16);
-      if (step === 0)
+        duration: o,
+        percent: r
+      } = e, u = Math.abs(r - i.oldPercent) / (o / 16);
+      if (u === 0)
         return;
-      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());
+      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());
       };
-      growData.timer && cancelAnimationFrame(growData.timer);
-      growData.timer = requestAnimationFrame(update);
-    };
-    watch(() => props.mileages, () => resizeMileage);
-    const resize = () => {
-      resizeWidth();
-      resizeMileage();
+      i.timer && cancelAnimationFrame(i.timer), i.timer = requestAnimationFrame(l);
     };
-    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);
+    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 resizeMileage = () => {
-      nextTick(() => {
-        props.mileages.forEach((_, i) => {
-          widthData.mileageWidth[i] = mileageRef.value[i] && mileageRef.value[i].offsetWidth || 0;
+    }, C = () => {
+      k(() => {
+        e.mileages.forEach((o, r) => {
+          m.mileageWidth[r] = f.value[r] && f.value[r].offsetWidth || 0;
         });
-      }).catch((e) => {
-        throw new Error(e);
+      }).catch((o) => {
+        throw new Error(o);
       });
-    };
-    const renderMileage = () => {
-      var _a;
+    }, M = () => {
+      var l;
       const {
-        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;
+        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);
           },
-          "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`
+          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`
           }
-        }, [((_a = slots.mileage) == null ? void 0 : _a.call(slots)) || createVNode("div", {
-          "class": bem("pivot")
-        }, [`${mileages[i]}%`])]);
-      }
-      return doms;
-    };
-    const renderPivot = () => {
-      var _a;
+        }, [((l = t.mileage) == null ? void 0 : l.call(t)) || d("div", {
+          class: g("pivot")
+        }, [`${o[s]}%`])]);
+      return a;
+    }, S = () => {
+      var s;
       const {
-        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
+        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
         }
-      }, [animation2 ? createVNode("div", {
-        "class": bem("number")
-      }, [createVNode("span", null, [growData.number, unit])]) : `${percent}${unit}`])]);
+      }, [a ? d("div", {
+        class: g("number")
+      }, [d("span", null, [i.number, l])]) : `${u}${l}`])]);
     };
     return () => {
       const {
-        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)
+        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)
         }
-      }, [createVNode("span", {
-        "class": bem("portion", {
-          animation: animation2
+      }, [d("span", {
+        class: g("portion", {
+          animation: s
         }),
-        "style": {
-          width: `${widthData.progressWidth * percent / 100}px`,
-          background: color,
-          transitionDuration: `${duration}ms`,
-          transitionTimingFunction: timing
+        style: {
+          width: `${m.progressWidth * a / 100}px`,
+          background: l,
+          transitionDuration: `${p}ms`,
+          transitionTimingFunction: N
         }
-      }, [createVNode("div", {
-        "ref": pivotContentRef,
-        "class": bem("pivot-content", {
-          animation: animation2
+      }, [d("div", {
+        ref: n,
+        class: g("pivot-content", {
+          animation: s
         }),
-        "style": {
-          left: `${(widthData.progressWidth - widthData.pivotContentWidth) * percent / 100}px`,
-          background: defaultPivot ? pivotColor || color : "none",
-          transitionDuration: `${duration}ms`,
-          transitionTimingFunction: timing
+        style: {
+          left: `${(m.progressWidth - m.pivotContentWidth) * a / 100}px`,
+          background: z ? A || l : "none",
+          transitionDuration: `${p}ms`,
+          transitionTimingFunction: N
         }
-      }, [renderPivot()])]), modeMilestone && renderMileage()]);
+      }, [S()])]), F && M()]);
     };
   }
 });
-const reset = "";
-const libs = "";
-const font = "";
-const animation = "";
-const theme = "";
-const style = "";
-Progress.install = (Vue) => {
-  const { name: name2 } = Progress;
-  Vue.component(name2, Progress);
+$.install = (e) => {
+  const { name: t } = $;
+  e.component(t, $);
 };
 export {
-  Progress as default
+  $ as default
 };