y-design-ssr 0.2.1 → 0.2.2

package/libs/slider/index.mjs

@@ -1,11 +1,40 @@
-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 = {
+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 = {
   "pull-refresh": {
     pulling: "下拉刷新...",
     loosing: "释放刷新...",
@@ -17,39 +46,94 @@ const $ = (e, a) => a ? typeof a == "string" ? ` ${e}--${a}` : Array.isArray(a)
     validateMessage: "请输入正确内容"
   }
 };
-s("zh-CN");
-E({
-  "zh-CN": J
+ref("zh-CN");
+reactive({
+  "zh-CN": defaultLang
 });
-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 = "";
+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);
   };
   return {
-    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
+    move,
+    start,
+    reset: reset2,
+    startX,
+    startY,
+    deltaX,
+    deltaY,
+    offsetX,
+    offsetY,
+    direction,
+    touchDirection,
+    isVertical,
+    isHorizontal
   };
-}, [F, d] = j("slider"), R = /* @__PURE__ */ H({
-  name: F,
+};
+const [cname, bem] = createNamespace("slider");
+const Slider = /* @__PURE__ */ defineComponent({
+  name: cname,
   props: {
     modelValue: {
       type: [Number, Array],
@@ -81,11 +165,11 @@ const j = (e) => {
     },
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     },
     showTooltip: {
       type: Boolean,
-      default: !1
+      default: false
     },
     step: {
       type: Number,
@@ -105,147 +189,259 @@ const j = (e) => {
     }
   },
   emits: ["change", "drag-start", "drag-end", "update:modelValue"],
-  setup(e, {
-    emit: a,
-    slots: o
+  setup(props, {
+    emit,
+    slots
   }) {
-    const n = s(), u = s(0), i = s(0), c = s(""), C = q(), h = V(() => Array.isArray(e.modelValue)), b = (t) => {
+    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 {
-        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)
+        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)
         return;
       const {
-        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(() => {
+        min,
+        modelValue
+      } = props;
       const {
-        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(() => {
+        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(() => {
       const {
-        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)
+        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)
         return;
-      C.move(t), c.value === "startMove" && a("drag-start"), c.value = "moving";
+      touch.move(event);
+      if (moveStatusRef.value === "startMove") {
+        emit("drag-start");
+      }
+      moveStatusRef.value = "moving";
       const {
-        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`
+        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;
         }
-      }, [o.button ? o.button() : g("div", {
-        class: d("inner-button"),
-        style: l
+      } 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
       }, null)]);
-    }, Y = V(() => Array((e.max - e.min) / e.step).fill({}).map((r, l) => ({
-      position: `${l * e.step}%`
-    })));
+    };
+    const getDotListRef = computed(() => {
+      const arr = Array((props.max - props.min) / props.step).fill({});
+      return arr.map((_, index) => ({
+        position: `${index * props.step}%`
+      }));
+    });
     return () => {
-      var t;
-      return g("div", {
-        class: d()
-      }, [o.iconLeft && g("div", {
-        class: d("icon", {
-          left: !0
+      var _a;
+      return createVNode("div", {
+        "class": bem()
+      }, [slots.iconLeft && createVNode("div", {
+        "class": bem("icon", {
+          left: true
         })
-      }, [o.iconLeft()]), g("div", {
-        role: "presentation",
-        ref: n,
-        class: d("wrapper-main", {
-          disabled: e.disabled
+      }, [slots.iconLeft()]), createVNode("div", {
+        "role": "presentation",
+        "ref": rootRef,
+        "class": bem("wrapper-main", {
+          disabled: props.disabled
         }),
-        style: {
-          background: e.inactiveColor,
-          height: L(e.barHeight)
+        "style": {
+          background: props.inactiveColor,
+          height: parseUnit(props.barHeight)
         },
-        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
+        "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
         }),
-        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`
+        "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`
         },
-        class: d("inner")
-      }, null), h.value ? [B(0), B(1)] : B()]), o.iconRight && g("div", {
-        class: d("icon", {
-          right: !0
+        "class": bem("inner")
+      }, null), isRangeRef.value ? [renderButton(0), renderButton(1)] : renderButton()]), slots.iconRight && createVNode("div", {
+        "class": bem("icon", {
+          right: true
         })
-      }, [o.iconRight()])]);
+      }, [slots.iconRight()])]);
     };
   }
 });
-R.install = (e) => {
-  const { name: a } = R;
-  e.component(a, R);
+const reset = "";
+const libs = "";
+const font = "";
+const animation = "";
+const theme = "";
+const style = "";
+Slider.install = (Vue) => {
+  const { name } = Slider;
+  Vue.component(name, Slider);
 };
 export {
-  R as default
+  Slider as default
 };