y-design-ssr 0.2.2 → 0.2.4

package/libs/slider/index.mjs

@@ -1,40 +1,11 @@
-import { ref, reactive, defineComponent, computed, createVNode } 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 s, reactive as E, defineComponent as H, computed as V, createVNode as g } from "vue";
+const $ = (e, a) => a ? typeof a == "string" ? ` ${e}--${a}` : Array.isArray(a) ? a.reduce((o, n) => o + $(e, n), "") : Object.keys(a).reduce(
+  (o, n) => o + (a[n] ? $(e, n) : ""),
+  ""
+) : "", P = (e) => (a, o) => {
+  let n = a, u = o;
+  return n && typeof n != "string" && (u = n, n = ""), n = n ? `${e}__${n}` : e, `${n}${$(n, u)}`;
+}, G = () => (e, a) => a ? `${$(`y-${e}`, a)}` : `y-${e}`, J = {
   "pull-refresh": {
     pulling: "下拉刷新...",
     loosing: "释放刷新...",
@@ -46,94 +17,39 @@ const defaultLang = {
     validateMessage: "请输入正确内容"
   }
 };
-ref("zh-CN");
-reactive({
-  "zh-CN": defaultLang
+s("zh-CN");
+E({
+  "zh-CN": J
 });
-const createNamespace = (name) => {
-  const prefixedName = `y-${name}`;
-  return [prefixedName, createBEM(prefixedName), createGlobalBem()];
-};
-const parseUnit = (val) => {
-  if (isNaN(Number(val)) && typeof val === "string") {
-    return val;
-  }
-  return `${val}px`;
-};
-const MIN_DISTANCE = 10;
-const getDirection = (x, y) => {
-  if (x > y && x > MIN_DISTANCE) {
-    return "horizontal";
-  }
-  if (y > x && y > MIN_DISTANCE) {
-    return "vertical";
-  }
-  return "";
-};
-const getTouchDirection = (x, y) => {
-  if (Math.abs(x) > Math.abs(y)) {
-    if (x > 0)
-      return "right";
-    return "left";
-  }
-  if (y > 0)
-    return "bottom";
-  return "top";
-};
-const useTouch = () => {
-  const startX = ref(0);
-  const startY = ref(0);
-  const deltaX = ref(0);
-  const deltaY = ref(0);
-  const offsetX = ref(0);
-  const offsetY = ref(0);
-  const direction = ref("");
-  const touchDirection = ref("");
-  const isVertical = () => direction.value === "vertical";
-  const isHorizontal = () => direction.value === "horizontal";
-  const reset2 = () => {
-    deltaX.value = 0;
-    deltaY.value = 0;
-    offsetX.value = 0;
-    offsetY.value = 0;
-    direction.value = "";
-    touchDirection.value = "";
-  };
-  const start = (event) => {
-    reset2();
-    startX.value = event.touches[0].clientX;
-    startY.value = event.touches[0].clientY;
-  };
-  const move = (event) => {
-    const touch = event.touches[0];
-    deltaX.value = touch.clientX < 0 ? 0 : touch.clientX - startX.value;
-    deltaY.value = touch.clientY - startY.value;
-    offsetX.value = Math.abs(deltaX.value);
-    offsetY.value = Math.abs(deltaY.value);
-    if (!direction.value) {
-      direction.value = getDirection(offsetX.value, offsetY.value);
-    }
-    touchDirection.value = getTouchDirection(deltaX.value, deltaY.value);
+const j = (e) => {
+  const a = `y-${e}`;
+  return [a, P(a), G()];
+}, L = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, _ = 10, U = (e, a) => e > a && e > _ ? "horizontal" : a > e && a > _ ? "vertical" : "", p = (e, a) => Math.abs(e) > Math.abs(a) ? e > 0 ? "right" : "left" : a > 0 ? "bottom" : "top", q = () => {
+  const e = s(0), a = s(0), o = s(0), n = s(0), u = s(0), i = s(0), c = s(""), C = s(""), h = () => c.value === "vertical", b = () => c.value === "horizontal", N = () => {
+    o.value = 0, n.value = 0, u.value = 0, i.value = 0, c.value = "", C.value = "";
   };
   return {
-    move,
-    start,
-    reset: reset2,
-    startX,
-    startY,
-    deltaX,
-    deltaY,
-    offsetX,
-    offsetY,
-    direction,
-    touchDirection,
-    isVertical,
-    isHorizontal
+    move: (m) => {
+      const y = m.touches[0];
+      o.value = y.clientX < 0 ? 0 : y.clientX - e.value, n.value = y.clientY - a.value, u.value = Math.abs(o.value), i.value = Math.abs(n.value), c.value || (c.value = U(u.value, i.value)), C.value = p(o.value, n.value);
+    },
+    start: (m) => {
+      N(), e.value = m.touches[0].clientX, a.value = m.touches[0].clientY;
+    },
+    reset: N,
+    startX: e,
+    startY: a,
+    deltaX: o,
+    deltaY: n,
+    offsetX: u,
+    offsetY: i,
+    direction: c,
+    touchDirection: C,
+    isVertical: h,
+    isHorizontal: b
   };
-};
-const [cname, bem] = createNamespace("slider");
-const Slider = /* @__PURE__ */ defineComponent({
-  name: cname,
+}, [F, d] = j("slider"), R = /* @__PURE__ */ H({
+  name: F,
   props: {
     modelValue: {
       type: [Number, Array],
@@ -165,11 +81,11 @@ const Slider = /* @__PURE__ */ defineComponent({
     },
     disabled: {
       type: Boolean,
-      default: false
+      default: !1
     },
     showTooltip: {
       type: Boolean,
-      default: false
+      default: !1
     },
     step: {
       type: Number,
@@ -189,259 +105,147 @@ const Slider = /* @__PURE__ */ defineComponent({
     }
   },
   emits: ["change", "drag-start", "drag-end", "update:modelValue"],
-  setup(props, {
-    emit,
-    slots
+  setup(e, {
+    emit: a,
+    slots: o
   }) {
-    const rootRef = ref();
-    const startRef = ref(0);
-    const curRef = ref(0);
-    const moveStatusRef = ref("");
-    const touch = useTouch();
-    const isRangeRef = computed(() => Array.isArray(props.modelValue));
-    const formatValue = (value) => {
+    const n = s(), u = s(0), i = s(0), c = s(""), C = q(), h = V(() => Array.isArray(e.modelValue)), b = (t) => {
       const {
-        min,
-        max,
-        step
-      } = props;
-      const val = Math.max(min, Math.min(value, max));
-      return Math.round(val / step) * step;
-    };
-    const handleClick = (event) => {
-      event.stopPropagation();
-      if (props.disabled)
+        min: r,
+        max: l,
+        step: f
+      } = e, v = Math.max(r, Math.min(t, l));
+      return Math.round(v / f) * f;
+    }, N = (t) => {
+      if (t.stopPropagation(), e.disabled)
         return;
       const {
-        min,
-        modelValue
-      } = props;
+        min: r,
+        modelValue: l
+      } = e, {
+        left: f,
+        width: v
+      } = n.value.getBoundingClientRect(), S = t.clientX - f, T = Math.floor(r + S / v * M.value);
+      if (h.value) {
+        const X = l[0], x = l[1], W = (X + x) / 2;
+        T <= W ? m([T, x]) : m([X, T]);
+      } else
+        m(T);
+    }, w = (t) => t[0] > t[1] ? [t[1], t[0]] : t, k = (t, r) => JSON.stringify(t) === JSON.stringify(r), m = (t, r) => {
+      let l = 0;
+      h.value ? l = w(t).map(b) : l = b(t), a("update:modelValue", l), typeof r > "u" && !k(u.value, i.value) && a("change", l);
+    }, y = V(() => {
       const {
-        left: rootLeft,
-        width: rootWidth
-      } = rootRef.value.getBoundingClientRect();
-      const delta = event.clientX - rootLeft;
-      const curValue = Math.floor(min + delta / rootWidth * numberGapRef.value);
-      if (isRangeRef.value) {
-        const left = modelValue[0];
-        const right = modelValue[1];
-        const middle = (left + right) / 2;
-        if (curValue <= middle) {
-          updateValue([curValue, right]);
-        } else {
-          updateValue([left, curValue]);
-        }
-      } else {
-        updateValue(curValue);
-      }
-    };
-    const handlePositionOrder = (value) => {
-      if (value[0] > value[1]) {
-        return [value[1], value[0]];
-      }
-      return value;
-    };
-    const isSameValue = (beforeValue, curValue) => JSON.stringify(beforeValue) === JSON.stringify(curValue);
-    const updateValue = (value, unfinished) => {
-      let newValue = 0;
-      if (isRangeRef.value) {
-        newValue = handlePositionOrder(value).map(formatValue);
-      } else {
-        newValue = formatValue(value);
-      }
-      emit("update:modelValue", newValue);
-      if (typeof unfinished === "undefined" && !isSameValue(startRef.value, curRef.value)) {
-        emit("change", newValue);
-      }
-    };
-    const getInnerLengthPercentRef = computed(() => {
+        modelValue: t,
+        min: r
+      } = e;
+      let l = null;
+      return h.value ? l = Math.floor((b(t[1]) - b(t[0])) * 100 / M.value) : l = Math.floor((b(t) - r) * 100 / M.value), `${l}%`;
+    }), A = V(() => {
       const {
-        modelValue,
-        min
-      } = props;
-      let tmpVal = null;
-      if (isRangeRef.value) {
-        tmpVal = Math.floor((formatValue(modelValue[1]) - formatValue(modelValue[0])) * 100 / numberGapRef.value);
-      } else {
-        tmpVal = Math.floor((formatValue(modelValue) - min) * 100 / numberGapRef.value);
-      }
-      return `${tmpVal}%`;
-    });
-    const getOffsetRef = computed(() => {
-      const {
-        modelValue,
-        min
-      } = props;
-      if (isRangeRef.value) {
-        return `${Math.floor((formatValue(modelValue[0]) - min) * 100 / numberGapRef.value)}%`;
-      }
-      return "0%";
-    });
-    const toolTipStyle = computed(() => {
-      return {
-        left: getInnerLengthPercentRef.value,
-        transition: moveStatusRef.value === "moving" ? "none" : `${props.transitionTime}ms ease-in-out`
-      };
-    });
-    const numberGapRef = computed(() => props.max - props.min);
-    const handleTouchStart = (event) => {
-      if (props.disabled)
-        return;
-      touch.start(event);
-      moveStatusRef.value = "startMove";
-      curRef.value = props.modelValue;
-      if (isRangeRef.value) {
-        startRef.value = [...curRef.value];
-      } else {
-        startRef.value = curRef.value;
-      }
-    };
-    const handleTouchMove = (event, pos) => {
-      if (props.disabled)
+        modelValue: t,
+        min: r
+      } = e;
+      return h.value ? `${Math.floor((b(t[0]) - r) * 100 / M.value)}%` : "0%";
+    }), z = V(() => ({
+      left: y.value,
+      transition: c.value === "moving" ? "none" : `${e.transitionTime}ms ease-in-out`
+    })), M = V(() => e.max - e.min), D = (t) => {
+      e.disabled || (C.start(t), c.value = "startMove", i.value = e.modelValue, h.value ? u.value = [...i.value] : u.value = i.value);
+    }, I = (t, r) => {
+      if (e.disabled)
         return;
-      touch.move(event);
-      if (moveStatusRef.value === "startMove") {
-        emit("drag-start");
-      }
-      moveStatusRef.value = "moving";
+      C.move(t), c.value === "startMove" && a("drag-start"), c.value = "moving";
       const {
-        width
-      } = rootRef.value.getBoundingClientRect();
-      const delta = touch.deltaX.value;
-      const diff = Math.floor(delta / width * numberGapRef.value);
-      if (Array.isArray(startRef.value) && Array.isArray(curRef.value)) {
-        if (pos === "left") {
-          curRef.value[0] = startRef.value[0] + diff;
-        } else {
-          curRef.value[1] = startRef.value[1] + diff;
+        width: l
+      } = n.value.getBoundingClientRect(), f = C.deltaX.value, v = Math.floor(f / l * M.value);
+      Array.isArray(u.value) && Array.isArray(i.value) ? r === "left" ? i.value[0] = u.value[0] + v : i.value[1] = u.value[1] + v : i.value = u.value + v, m(i.value, !0);
+    }, O = () => {
+      e.disabled || (c.value === "moving" && (m(i.value), a("drag-end")), c.value = "endMove");
+    }, B = (t) => {
+      let r = "", l = {}, f = 0, v = d("button-wrapper");
+      return t === 0 ? (r = "left", l = {
+        left: A.value,
+        backgroundColor: Array.isArray(e.buttonBgColor) ? e.buttonBgColor[0] : e.buttonBgColor
+      }, f = e.modelValue[t], v = d("button-wrapper", "left")) : t === 1 ? (r = "right", f = e.modelValue[t], l = {
+        left: `${parseInt(y.value) + parseInt(A.value)}%`,
+        backgroundColor: Array.isArray(e.buttonBgColor) ? e.buttonBgColor[1] : e.buttonBgColor
+      }, v = d("button-wrapper", "right")) : (f = e.modelValue, l = {
+        left: y.value,
+        backgroundColor: e.buttonBgColor
+      }), g("div", {
+        role: "slider",
+        "aria-valuemin": e.min,
+        "aria-valuemax": e.max,
+        "aria-valuenow": f,
+        class: v,
+        onTouchstart: D,
+        onTouchmove: (S) => I(S, r),
+        onTouchend: O,
+        style: {
+          ...l,
+          transition: c.value === "moving" ? "none" : `${e.transitionTime}ms ease-in-out`
         }
-      } else {
-        curRef.value = startRef.value + diff;
-      }
-      updateValue(curRef.value, true);
-    };
-    const handleTouchEnd = () => {
-      if (props.disabled)
-        return;
-      if (moveStatusRef.value === "moving") {
-        updateValue(curRef.value);
-        emit("drag-end");
-      }
-      moveStatusRef.value = "endMove";
-    };
-    const renderButton = (index) => {
-      let pos = "";
-      let posStyle = {};
-      let curValue = 0;
-      let buttonWrapperClass = bem("button-wrapper");
-      if (index === 0) {
-        pos = "left";
-        posStyle = {
-          left: getOffsetRef.value,
-          backgroundColor: Array.isArray(props.buttonBgColor) ? props.buttonBgColor[0] : props.buttonBgColor
-        };
-        curValue = props.modelValue[index];
-        buttonWrapperClass = bem("button-wrapper", "left");
-      } else if (index === 1) {
-        pos = "right";
-        curValue = props.modelValue[index];
-        posStyle = {
-          left: `${parseInt(getInnerLengthPercentRef.value) + parseInt(getOffsetRef.value)}%`,
-          backgroundColor: Array.isArray(props.buttonBgColor) ? props.buttonBgColor[1] : props.buttonBgColor
-        };
-        buttonWrapperClass = bem("button-wrapper", "right");
-      } else {
-        curValue = props.modelValue;
-        posStyle = {
-          left: getInnerLengthPercentRef.value,
-          backgroundColor: props.buttonBgColor
-        };
-      }
-      return createVNode("div", {
-        "role": "slider",
-        "aria-valuemin": props.min,
-        "aria-valuemax": props.max,
-        "aria-valuenow": curValue,
-        "class": buttonWrapperClass,
-        "onTouchstart": handleTouchStart,
-        "onTouchmove": (e) => handleTouchMove(e, pos),
-        "onTouchend": handleTouchEnd,
-        "style": {
-          ...posStyle,
-          transition: moveStatusRef.value === "moving" ? "none" : `${props.transitionTime}ms ease-in-out`
-        }
-      }, [slots.button ? slots.button() : createVNode("div", {
-        "class": bem("inner-button"),
-        "style": posStyle
+      }, [o.button ? o.button() : g("div", {
+        class: d("inner-button"),
+        style: l
       }, null)]);
-    };
-    const getDotListRef = computed(() => {
-      const arr = Array((props.max - props.min) / props.step).fill({});
-      return arr.map((_, index) => ({
-        position: `${index * props.step}%`
-      }));
-    });
+    }, Y = V(() => Array((e.max - e.min) / e.step).fill({}).map((r, l) => ({
+      position: `${l * e.step}%`
+    })));
     return () => {
-      var _a;
-      return createVNode("div", {
-        "class": bem()
-      }, [slots.iconLeft && createVNode("div", {
-        "class": bem("icon", {
-          left: true
+      var t;
+      return g("div", {
+        class: d()
+      }, [o.iconLeft && g("div", {
+        class: d("icon", {
+          left: !0
         })
-      }, [slots.iconLeft()]), createVNode("div", {
-        "role": "presentation",
-        "ref": rootRef,
-        "class": bem("wrapper-main", {
-          disabled: props.disabled
+      }, [o.iconLeft()]), g("div", {
+        role: "presentation",
+        ref: n,
+        class: d("wrapper-main", {
+          disabled: e.disabled
         }),
-        "style": {
-          background: props.inactiveColor,
-          height: parseUnit(props.barHeight)
+        style: {
+          background: e.inactiveColor,
+          height: L(e.barHeight)
         },
-        "onClick": handleClick
-      }, [props.step !== 1 && createVNode("div", {
-        "class": bem("dots")
-      }, [getDotListRef.value.map((item) => {
-        return createVNode("div", {
-          "class": bem("dot"),
-          "style": {
-            left: item.position,
-            background: props.gapColor,
-            width: parseUnit(props.gapWidth)
-          }
-        }, null);
-      })]), props.showTooltip && createVNode("div", {
-        "class": bem("tooltip", {
-          wrapper: slots.toolTip
+        onClick: N
+      }, [e.step !== 1 && g("div", {
+        class: d("dots")
+      }, [Y.value.map((r) => g("div", {
+        class: d("dot"),
+        style: {
+          left: r.position,
+          background: e.gapColor,
+          width: L(e.gapWidth)
+        }
+      }, null))]), e.showTooltip && g("div", {
+        class: d("tooltip", {
+          wrapper: o.toolTip
         }),
-        "style": toolTipStyle.value
-      }, [((_a = slots.toolTip) == null ? void 0 : _a.call(slots)) || props.modelValue]), createVNode("div", {
-        "style": {
-          left: getOffsetRef.value,
-          width: getInnerLengthPercentRef.value,
-          background: props.activeColor,
-          transition: moveStatusRef.value === "moving" ? "none" : `${props.transitionTime}ms ease-in-out`
+        style: z.value
+      }, [((t = o.toolTip) == null ? void 0 : t.call(o)) || e.modelValue]), g("div", {
+        style: {
+          left: A.value,
+          width: y.value,
+          background: e.activeColor,
+          transition: c.value === "moving" ? "none" : `${e.transitionTime}ms ease-in-out`
         },
-        "class": bem("inner")
-      }, null), isRangeRef.value ? [renderButton(0), renderButton(1)] : renderButton()]), slots.iconRight && createVNode("div", {
-        "class": bem("icon", {
-          right: true
+        class: d("inner")
+      }, null), h.value ? [B(0), B(1)] : B()]), o.iconRight && g("div", {
+        class: d("icon", {
+          right: !0
         })
-      }, [slots.iconRight()])]);
+      }, [o.iconRight()])]);
     };
   }
 });
-const reset = "";
-const libs = "";
-const font = "";
-const animation = "";
-const theme = "";
-const style = "";
-Slider.install = (Vue) => {
-  const { name } = Slider;
-  Vue.component(name, Slider);
+R.install = (e) => {
+  const { name: a } = R;
+  e.component(a, R);
 };
 export {
-  Slider as default
+  R as default
 };