@nutui/nutui 3.1.22-beta.5 → 3.1.23-beta.1

package/dist/packages/_es/Radio.js

@@ -1,28 +1,96 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { inject as e, computed as a, h as t } from "vue";
-import { c as l } from "./component.js";
-import i from "./Icon.js";
+import { inject, computed, h } from "vue";
+import { c as createComponent } from "./component.js";
+import _sfc_main$1 from "./Icon.js";
 import "../locale/lang";
 import "./pxCheck.js";
-const { componentName: n, create: o } = l("radio"), s = o({ props: { disabled: { type: Boolean, default: false }, shape: { type: String, default: "round" }, label: { type: [String, Number], default: "" }, iconName: { type: String, default: "check-normal" }, iconActiveName: { type: String, default: "check-checked" }, iconSize: { type: [String, Number], default: "" }, iconClassPrefix: { type: String, default: "nut-icon" }, iconFontClassName: { type: String, default: "nutui-iconfont" } }, setup(l2, { emit: o2, slots: s2 }) {
-  let c = e("parent", null);
-  const u = a(() => c.label.value == l2.label), r = a(() => l2.disabled ? "nut-radio__icon--disable" : u.value ? "nut-radio__icon" : "nut-radio__icon--unchecked"), d = a(() => c.position), p = () => {
-    const { iconName: e2, iconSize: a2, iconActiveName: n2, iconClassPrefix: o3, iconFontClassName: s3 } = l2;
-    return t(i, { name: u.value ? n2 : e2, size: a2, class: r.value, classPrefix: o3, fontClassName: s3 });
-  }, m = () => {
-    var _a;
-    return t("view", { class: `${n}__label ${l2.disabled ? `${n}__label--disabled` : ""}` }, (_a = s2.default) == null ? void 0 : _a.call(s2));
-  }, b = () => {
-    u.value || l2.disabled || c.updateValue(l2.label);
-  };
-  let f = d.value === "left";
-  return () => {
-    var _a;
-    return t("view", { class: `${n} ${n}--${l2.shape} ${f ? `${n}--reverse` : ""}`, onClick: b }, [l2.shape == "button" ? t("view", { class: `${n}__button ${u.value && `${n}__button--active`} ${l2.disabled ? `${n}__button--disabled` : ""}` }, (_a = s2.default) == null ? void 0 : _a.call(s2)) : f ? [m(), p()] : [p(), m()]]);
-  };
-} });
-export { s as default };
+const { componentName, create } = createComponent("radio");
+const _sfc_main = create({
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    shape: {
+      type: String,
+      default: "round"
+    },
+    label: {
+      type: [String, Number],
+      default: ""
+    },
+    iconName: {
+      type: String,
+      default: "check-normal"
+    },
+    iconActiveName: {
+      type: String,
+      default: "check-checked"
+    },
+    iconSize: {
+      type: [String, Number],
+      default: ""
+    },
+    iconClassPrefix: {
+      type: String,
+      default: "nut-icon"
+    },
+    iconFontClassName: {
+      type: String,
+      default: "nutui-iconfont"
+    }
+  },
+  setup(props, { emit, slots }) {
+    let parent = inject("parent", null);
+    const isCurValue = computed(() => {
+      return parent.label.value == props.label;
+    });
+    const color = computed(() => {
+      return !props.disabled ? isCurValue.value ? "nut-radio__icon" : "nut-radio__icon--unchecked" : "nut-radio__icon--disable";
+    });
+    const position = computed(() => {
+      return parent.position;
+    });
+    const renderIcon = () => {
+      const { iconName, iconSize, iconActiveName, iconClassPrefix, iconFontClassName } = props;
+      return h(_sfc_main$1, {
+        name: isCurValue.value ? iconActiveName : iconName,
+        size: iconSize,
+        class: color.value,
+        classPrefix: iconClassPrefix,
+        fontClassName: iconFontClassName
+      });
+    };
+    const renderLabel = () => {
+      var _a;
+      return h("view", {
+        class: `${componentName}__label ${props.disabled ? `${componentName}__label--disabled` : ""}`
+      }, (_a = slots.default) == null ? void 0 : _a.call(slots));
+    };
+    const renderButton = () => {
+      var _a;
+      return h("view", {
+        class: `${componentName}__button ${isCurValue.value && `${componentName}__button--active`} ${props.disabled ? `${componentName}__button--disabled` : ""}`
+      }, (_a = slots.default) == null ? void 0 : _a.call(slots));
+    };
+    const handleClick = () => {
+      if (isCurValue.value || props.disabled)
+        return;
+      parent.updateValue(props.label);
+    };
+    let reverseState = position.value === "left";
+    return () => {
+      return h("view", {
+        class: `${componentName} ${componentName}--${props.shape} ${reverseState ? `${componentName}--reverse` : ""}`,
+        onClick: handleClick
+      }, [
+        props.shape == "button" ? renderButton() : reverseState ? [renderLabel(), renderIcon()] : [renderIcon(), renderLabel()]
+      ]);
+    };
+  }
+});
+export { _sfc_main as default };

package/dist/packages/_es/RadioGroup.js

@@ -1,13 +1,42 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { provide as e, readonly as t, computed as o, watch as a, h as l } from "vue";
-import { c as i } from "./component.js";
+import { provide, readonly, computed, watch, h } from "vue";
+import { c as createComponent } from "./component.js";
 import "../locale/lang";
-const { componentName: r, create: n } = i("radiogroup"), p = n({ props: { modelValue: { type: [Number, String, Boolean], default: "" }, direction: { type: String, default: "vertical" }, textPosition: { type: String, default: "right" } }, emits: ["change", "update:modelValue"], setup: (i2, { emit: n2, slots: p2 }) => (e("parent", { label: t(o(() => i2.modelValue)), position: i2.textPosition, updateValue: (e2) => n2("update:modelValue", e2) }), a(() => i2.modelValue, (e2) => n2("change", e2)), () => {
-  var _a;
-  return l("view", { class: `${r} ${r}--${i2.direction}` }, (_a = p2.default) == null ? void 0 : _a.call(p2));
-}) });
-export { p as default };
+const { componentName, create } = createComponent("radiogroup");
+const _sfc_main = create({
+  props: {
+    modelValue: {
+      type: [Number, String, Boolean],
+      default: ""
+    },
+    direction: {
+      type: String,
+      default: "vertical"
+    },
+    textPosition: {
+      type: String,
+      default: "right"
+    }
+  },
+  emits: ["change", "update:modelValue"],
+  setup(props, { emit, slots }) {
+    const updateValue = (value) => emit("update:modelValue", value);
+    provide("parent", {
+      label: readonly(computed(() => props.modelValue)),
+      position: props.textPosition,
+      updateValue
+    });
+    watch(() => props.modelValue, (value) => emit("change", value));
+    return () => {
+      var _a;
+      return h("view", {
+        class: `${componentName} ${componentName}--${props.direction}`
+      }, (_a = slots.default) == null ? void 0 : _a.call(slots));
+    };
+  }
+});
+export { _sfc_main as default };

package/dist/packages/_es/Range.js

@@ -1,89 +1,414 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { ref as e, computed as a, toRefs as t, openBlock as n, createElementBlock as o, normalizeClass as r, toDisplayString as l, createCommentVNode as u, createElementVNode as i, normalizeStyle as s, withModifiers as c, Fragment as m, renderList as d, createTextVNode as v, renderSlot as p } from "vue";
-import { c as b } from "./component.js";
-import { u as g } from "./index4.js";
-import { u as h } from "./index2.js";
-import { _ as y } from "./plugin-vue_export-helper.js";
+import { ref, computed, toRefs, openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, createElementVNode, normalizeStyle, withModifiers, Fragment, renderList, createTextVNode, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import { u as useTouch } from "./index4.js";
+import { u as useRect } from "./index2.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const { componentName: k, create: f } = b("range"), T = f({ props: { range: { type: Boolean, default: false }, disabled: Boolean, activeColor: String, inactiveColor: String, buttonColor: String, vertical: { type: Boolean, default: false }, marks: { type: Object, default: {} }, hiddenRange: { type: Boolean, default: false }, hiddenTag: { type: Boolean, default: false }, min: { type: [Number, String], default: 0 }, max: { type: [Number, String], default: 100 }, step: { type: [Number, String], default: 1 }, modelValue: { type: [Number, Array], default: 0 } }, emits: ["change", "drag-end", "drag-start", "update:modelValue"], setup(n2, { emit: o2, slots: r2 }) {
-  const l2 = e(0);
-  let u2, i2;
-  const s2 = e(), c2 = e(), m2 = g(), d2 = a(() => {
-    const { marks: e2, max: a2, min: t2 } = n2;
-    return Object.keys(e2).map(parseFloat).sort((e3, a3) => e3 - a3).filter((e3) => e3 >= t2 && e3 <= a2);
-  }), v2 = a(() => Number(n2.max) - Number(n2.min)), p2 = a(() => {
-    const e2 = k;
-    return { [e2]: true, [`${e2}-disabled`]: n2.disabled, [`${e2}-vertical`]: n2.vertical, [`${e2}-show-number`]: !n2.hiddenRange };
-  }), b2 = a(() => {
-    const e2 = "nut-range-container";
-    return { [e2]: true, [`${e2}-vertical`]: n2.vertical };
-  }), y2 = a(() => ({ background: n2.inactiveColor })), f2 = a(() => ({ borderColor: n2.buttonColor })), T2 = (e2) => !!n2.range && Array.isArray(e2), x2 = () => {
-    const { modelValue: e2, min: a2 } = n2;
-    return T2(e2) ? 100 * (e2[1] - e2[0]) / v2.value + "%" : 100 * (e2 - Number(a2)) / v2.value + "%";
-  }, w2 = () => {
-    const { modelValue: e2, min: a2 } = n2;
-    return T2(e2) ? 100 * (e2[0] - Number(a2)) / v2.value + "%" : "0%";
-  }, S2 = a(() => n2.vertical ? { height: x2(), top: w2(), background: n2.activeColor, transition: c2.value ? "none" : void 0 } : { width: x2(), left: w2(), background: n2.activeColor, transition: c2.value ? "none" : void 0 }), C2 = (e2) => {
-    const { min: a2, max: t2, step: o3 } = n2;
-    return e2 = Math.max(+a2, Math.min(e2, +t2)), Math.round(e2 / +o3) * +o3;
-  }, N2 = (e2, a2) => JSON.stringify(e2) === JSON.stringify(a2), V2 = (e2, a2) => {
-    e2 = T2(e2) ? ((e3) => e3[0] > e3[1] ? e3.slice(0).reverse() : e3)(e2).map(C2) : C2(e2), N2(e2, n2.modelValue) || o2("update:modelValue", e2), a2 && !N2(e2, u2) && o2("change", e2);
-  };
-  return { root: s2, classes: p2, wrapperStyle: y2, buttonStyle: f2, onClick: (e2) => {
-    if (n2.disabled)
-      return;
-    const { min: a2, modelValue: t2 } = n2, o3 = h(s2);
-    let r3 = e2.clientX - o3.left, l3 = o3.width;
-    n2.vertical && (r3 = e2.clientY - o3.top, l3 = o3.height);
-    const u3 = Number(a2) + r3 / l3 * v2.value;
-    if (T2(t2)) {
-      const [e3, a3] = t2;
-      V2(u3 <= (e3 + a3) / 2 ? [u3, a3] : [e3, u3], true);
-    } else
-      V2(u3, true);
-  }, onTouchStart: (e2) => {
-    n2.disabled || (m2.start(e2), i2 = n2.modelValue, u2 = T2(i2) ? i2.map(C2) : C2(i2), c2.value = "start");
-  }, onTouchMove: (e2) => {
-    if (n2.disabled)
-      return;
-    c2.value === "start" && o2("drag-start"), m2.move(e2), c2.value = "draging";
-    const a2 = h(s2);
-    let t2 = m2.deltaX.value, r3 = a2.width, d3 = t2 / r3 * v2.value;
-    n2.vertical && (t2 = m2.deltaY.value, r3 = a2.height, d3 = t2 / r3 * v2.value), T2(u2) ? i2[l2.value] = u2[l2.value] + d3 : i2 = u2 + d3, V2(i2), e2.stopPropagation(), e2.preventDefault();
-  }, onTouchEnd: () => {
-    n2.disabled || (c2.value === "draging" && (V2(i2, true), o2("drag-end")), c2.value = "");
-  }, ...t(n2), barStyle: S2, curValue: (e2) => typeof e2 == "number" ? n2.modelValue[e2] : n2.modelValue, buttonIndex: l2, containerClasses: b2, markClassName: (e2) => {
-    const { modelValue: a2, max: t2, min: o3 } = n2;
-    let r3 = Number(o3), l3 = Number(t2);
-    if (n2.range) {
-      const [e3, t3] = a2;
-      r3 = e3, l3 = t3;
-    } else
-      l3 = a2;
-    return { "nut-range-mark-text": true, "nut-range-mark-text-active": e2 <= l3 && e2 >= r3 };
-  }, marksStyle: (e2) => {
-    const { max: a2, min: t2, vertical: o3 } = n2;
-    let r3 = { left: (e2 - Number(t2)) / v2.value * 100 + "%" };
-    return o3 && (r3 = { top: (e2 - Number(t2)) / v2.value * 100 + "%" }), r3;
-  }, marksList: d2, tickStyle: (e2) => {
-    const { modelValue: a2, max: t2, min: o3 } = n2;
-    let r3 = Number(o3), l3 = Number(t2);
-    if (n2.range) {
-      const [e3, t3] = a2;
-      r3 = e3, l3 = t3;
+const { componentName, create } = createComponent("range");
+const _sfc_main = create({
+  props: {
+    range: {
+      type: Boolean,
+      default: false
+    },
+    disabled: Boolean,
+    activeColor: String,
+    inactiveColor: String,
+    buttonColor: String,
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    marks: {
+      type: Object,
+      default: {}
+    },
+    hiddenRange: {
+      type: Boolean,
+      default: false
+    },
+    hiddenTag: {
+      type: Boolean,
+      default: false
+    },
+    min: {
+      type: [Number, String],
+      default: 0
+    },
+    max: {
+      type: [Number, String],
+      default: 100
+    },
+    step: {
+      type: [Number, String],
+      default: 1
+    },
+    modelValue: {
+      type: [Number, Array],
+      default: 0
     }
-    return { background: e2 <= l3 && e2 >= r3 ? n2.activeColor : n2.inactiveColor };
-  } };
-} }), x = { key: 0, class: "min" }, w = { key: 0, class: "nut-range-mark" }, S = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "onTouchstart"], C = { key: 0, class: "number" }, N = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax"], V = { key: 0, class: "number" }, E = { key: 1, class: "max" };
-var M = y(T, [["render", function(e2, a2, t2, b2, g2, h2) {
-  return n(), o("view", { class: r(e2.containerClasses) }, [e2.hiddenRange ? u("", true) : (n(), o("view", x, l(+e2.min), 1)), i("view", { ref: "root", style: s(e2.wrapperStyle), class: r(e2.classes), onClick: a2[9] || (a2[9] = c((...a3) => e2.onClick && e2.onClick(...a3), ["stop"])) }, [e2.marksList.length > 0 ? (n(), o("view", w, [(n(true), o(m, null, d(e2.marksList, (a3) => (n(), o("span", { key: a3, class: r(e2.markClassName(a3)), style: s(e2.marksStyle(a3)) }, [v(l(a3) + " ", 1), i("span", { class: "nut-range-tick", style: s(e2.tickStyle(a3)) }, null, 4)], 6))), 128))])) : u("", true), i("view", { class: "nut-range-bar", style: s(e2.barStyle) }, [e2.range ? (n(), o(m, { key: 0 }, d([0, 1], (t3) => i("view", { key: t3, role: "slider", class: r({ "nut-range-button-wrapper-left": t3 == 0, "nut-range-button-wrapper-right": t3 == 1 }), tabindex: e2.disabled ? -1 : 0, "aria-valuemin": +e2.min, "aria-valuenow": e2.curValue(t3), "aria-valuemax": +e2.max, "aria-orientation": "horizontal", onTouchstart: c((a3) => {
-    typeof t3 == "number" && (e2.buttonIndex = t3), e2.onTouchStart(a3);
-  }, ["stop", "prevent"]), onTouchmove: a2[0] || (a2[0] = c((...a3) => e2.onTouchMove && e2.onTouchMove(...a3), ["stop", "prevent"])), onTouchend: a2[1] || (a2[1] = c((...a3) => e2.onTouchEnd && e2.onTouchEnd(...a3), ["stop", "prevent"])), onTouchcancel: a2[2] || (a2[2] = c((...a3) => e2.onTouchEnd && e2.onTouchEnd(...a3), ["stop", "prevent"])), onClick: a2[3] || (a2[3] = (e3) => e3.stopPropagation()) }, [e2.$slots.button ? p(e2.$slots, "button", { key: 0 }) : (n(), o("view", { key: 1, class: "nut-range-button", style: s(e2.buttonStyle) }, [e2.hiddenTag ? u("", true) : (n(), o("view", C, l(e2.curValue(t3)), 1))], 4))], 42, S)), 64)) : (n(), o("view", { key: 1, role: "slider", class: "nut-range-button-wrapper", tabindex: e2.disabled ? -1 : 0, "aria-valuemin": +e2.min, "aria-valuenow": e2.curValue(), "aria-valuemax": +e2.max, "aria-orientation": "horizontal", onTouchstart: a2[4] || (a2[4] = c((a3) => {
-    e2.onTouchStart(a3);
-  }, ["stop", "prevent"])), onTouchmove: a2[5] || (a2[5] = c((...a3) => e2.onTouchMove && e2.onTouchMove(...a3), ["stop", "prevent"])), onTouchend: a2[6] || (a2[6] = c((...a3) => e2.onTouchEnd && e2.onTouchEnd(...a3), ["stop", "prevent"])), onTouchcancel: a2[7] || (a2[7] = c((...a3) => e2.onTouchEnd && e2.onTouchEnd(...a3), ["stop", "prevent"])), onClick: a2[8] || (a2[8] = (e3) => e3.stopPropagation()) }, [e2.$slots.button ? p(e2.$slots, "button", { key: 0 }) : (n(), o("view", { key: 1, class: "nut-range-button", style: s(e2.buttonStyle) }, [e2.hiddenTag ? u("", true) : (n(), o("view", V, l(e2.curValue()), 1))], 4))], 40, N))], 4)], 6), e2.hiddenRange ? u("", true) : (n(), o("view", E, l(+e2.max), 1))], 2);
-}]]);
-export { M as default };
+  },
+  emits: ["change", "drag-end", "drag-start", "update:modelValue"],
+  setup(props, { emit, slots }) {
+    const buttonIndex = ref(0);
+    let startValue;
+    let currentValue;
+    const root = ref();
+    const dragStatus = ref();
+    const touch = useTouch();
+    const marksList = computed(() => {
+      const { marks, max, min } = props;
+      const marksKeys = Object.keys(marks);
+      const list = marksKeys.map(parseFloat).sort((a, b) => a - b).filter((point) => point >= min && point <= max);
+      return list;
+    });
+    const scope = computed(() => Number(props.max) - Number(props.min));
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}-disabled`]: props.disabled,
+        [`${prefixCls}-vertical`]: props.vertical,
+        [`${prefixCls}-show-number`]: !props.hiddenRange
+      };
+    });
+    const containerClasses = computed(() => {
+      const prefixCls = "nut-range-container";
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}-vertical`]: props.vertical
+      };
+    });
+    const wrapperStyle = computed(() => {
+      return {
+        background: props.inactiveColor
+      };
+    });
+    const buttonStyle = computed(() => {
+      return {
+        borderColor: props.buttonColor
+      };
+    });
+    const isRange = (val) => !!props.range && Array.isArray(val);
+    const calcMainAxis = () => {
+      const { modelValue, min } = props;
+      if (isRange(modelValue)) {
+        return `${(modelValue[1] - modelValue[0]) * 100 / scope.value}%`;
+      }
+      return `${(modelValue - Number(min)) * 100 / scope.value}%`;
+    };
+    const calcOffset = () => {
+      const { modelValue, min } = props;
+      if (isRange(modelValue)) {
+        return `${(modelValue[0] - Number(min)) * 100 / scope.value}%`;
+      }
+      return `0%`;
+    };
+    const barStyle = computed(() => {
+      if (props.vertical) {
+        return {
+          height: calcMainAxis(),
+          top: calcOffset(),
+          background: props.activeColor,
+          transition: dragStatus.value ? "none" : void 0
+        };
+      } else {
+        return {
+          width: calcMainAxis(),
+          left: calcOffset(),
+          background: props.activeColor,
+          transition: dragStatus.value ? "none" : void 0
+        };
+      }
+    });
+    const markClassName = (mark) => {
+      const classPrefix = "nut-range-mark";
+      const { modelValue, max, min } = props;
+      let lowerBound = Number(min);
+      let upperBound = Number(max);
+      if (props.range) {
+        const [left, right] = modelValue;
+        lowerBound = left;
+        upperBound = right;
+      } else {
+        upperBound = modelValue;
+      }
+      let isActive = mark <= upperBound && mark >= lowerBound;
+      return {
+        [`${classPrefix}-text`]: true,
+        [`${classPrefix}-text-active`]: isActive
+      };
+    };
+    const marksStyle = (mark) => {
+      const { max, min, vertical } = props;
+      let style = {
+        left: `${(mark - Number(min)) / scope.value * 100}%`
+      };
+      if (vertical) {
+        style = {
+          top: `${(mark - Number(min)) / scope.value * 100}%`
+        };
+      }
+      return style;
+    };
+    const tickStyle = (mark) => {
+      const { modelValue, max, min } = props;
+      let lowerBound = Number(min);
+      let upperBound = Number(max);
+      if (props.range) {
+        const [left, right] = modelValue;
+        lowerBound = left;
+        upperBound = right;
+      }
+      let isActive = mark <= upperBound && mark >= lowerBound;
+      let style = {
+        background: !isActive ? props.inactiveColor : props.activeColor
+      };
+      return style;
+    };
+    const format = (value) => {
+      const { min, max, step } = props;
+      value = Math.max(+min, Math.min(value, +max));
+      return Math.round(value / +step) * +step;
+    };
+    const isSameValue = (newValue, oldValue) => JSON.stringify(newValue) === JSON.stringify(oldValue);
+    const handleOverlap = (value) => {
+      if (value[0] > value[1]) {
+        return value.slice(0).reverse();
+      }
+      return value;
+    };
+    const updateValue = (value, end) => {
+      if (isRange(value)) {
+        value = handleOverlap(value).map(format);
+      } else {
+        value = format(value);
+      }
+      if (!isSameValue(value, props.modelValue)) {
+        emit("update:modelValue", value);
+      }
+      if (end && !isSameValue(value, startValue)) {
+        emit("change", value);
+      }
+    };
+    const onClick = (event) => {
+      if (props.disabled) {
+        return;
+      }
+      const { min, modelValue } = props;
+      const rect = useRect(root);
+      let delta = event.clientX - rect.left;
+      let total = rect.width;
+      if (props.vertical) {
+        delta = event.clientY - rect.top;
+        total = rect.height;
+      }
+      const value = Number(min) + delta / total * scope.value;
+      if (isRange(modelValue)) {
+        const [left, right] = modelValue;
+        const middle = (left + right) / 2;
+        if (value <= middle) {
+          updateValue([value, right], true);
+        } else {
+          updateValue([left, value], true);
+        }
+      } else {
+        updateValue(value, true);
+      }
+    };
+    const onTouchStart = (event) => {
+      if (props.disabled) {
+        return;
+      }
+      touch.start(event);
+      currentValue = props.modelValue;
+      if (isRange(currentValue)) {
+        startValue = currentValue.map(format);
+      } else {
+        startValue = format(currentValue);
+      }
+      dragStatus.value = "start";
+    };
+    const onTouchMove = (event) => {
+      if (props.disabled) {
+        return;
+      }
+      if (dragStatus.value === "start") {
+        emit("drag-start");
+      }
+      touch.move(event);
+      dragStatus.value = "draging";
+      const rect = useRect(root);
+      let delta = touch.deltaX.value;
+      let total = rect.width;
+      let diff = delta / total * scope.value;
+      if (props.vertical) {
+        delta = touch.deltaY.value;
+        total = rect.height;
+        diff = delta / total * scope.value;
+      }
+      if (isRange(startValue)) {
+        currentValue[buttonIndex.value] = startValue[buttonIndex.value] + diff;
+      } else {
+        currentValue = startValue + diff;
+      }
+      updateValue(currentValue);
+      event.stopPropagation();
+      event.preventDefault();
+    };
+    const onTouchEnd = () => {
+      if (props.disabled) {
+        return;
+      }
+      if (dragStatus.value === "draging") {
+        updateValue(currentValue, true);
+        emit("drag-end");
+      }
+      dragStatus.value = "";
+    };
+    const curValue = (idx) => {
+      const value = typeof idx === "number" ? props.modelValue[idx] : props.modelValue;
+      return value;
+    };
+    return {
+      root,
+      classes,
+      wrapperStyle,
+      buttonStyle,
+      onClick,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      ...toRefs(props),
+      barStyle,
+      curValue,
+      buttonIndex,
+      containerClasses,
+      markClassName,
+      marksStyle,
+      marksList,
+      tickStyle
+    };
+  }
+});
+const _hoisted_1 = {
+  key: 0,
+  class: "min"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "nut-range-mark"
+};
+const _hoisted_3 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "onTouchstart"];
+const _hoisted_4 = {
+  key: 0,
+  class: "number"
+};
+const _hoisted_5 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax"];
+const _hoisted_6 = {
+  key: 0,
+  class: "number"
+};
+const _hoisted_7 = {
+  key: 1,
+  class: "max"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.containerClasses)
+  }, [
+    !_ctx.hiddenRange ? (openBlock(), createElementBlock("view", _hoisted_1, toDisplayString(+_ctx.min), 1)) : createCommentVNode("", true),
+    createElementVNode("view", {
+      ref: "root",
+      style: normalizeStyle(_ctx.wrapperStyle),
+      class: normalizeClass(_ctx.classes),
+      onClick: _cache[9] || (_cache[9] = withModifiers((...args) => _ctx.onClick && _ctx.onClick(...args), ["stop"]))
+    }, [
+      _ctx.marksList.length > 0 ? (openBlock(), createElementBlock("view", _hoisted_2, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.marksList, (marks) => {
+          return openBlock(), createElementBlock("span", {
+            key: marks,
+            class: normalizeClass(_ctx.markClassName(marks)),
+            style: normalizeStyle(_ctx.marksStyle(marks))
+          }, [
+            createTextVNode(toDisplayString(marks) + " ", 1),
+            createElementVNode("span", {
+              class: "nut-range-tick",
+              style: normalizeStyle(_ctx.tickStyle(marks))
+            }, null, 4)
+          ], 6);
+        }), 128))
+      ])) : createCommentVNode("", true),
+      createElementVNode("view", {
+        class: "nut-range-bar",
+        style: normalizeStyle(_ctx.barStyle)
+      }, [
+        _ctx.range ? (openBlock(), createElementBlock(Fragment, { key: 0 }, renderList([0, 1], (index2) => {
+          return createElementVNode("view", {
+            key: index2,
+            role: "slider",
+            class: normalizeClass({
+              "nut-range-button-wrapper-left": index2 == 0,
+              "nut-range-button-wrapper-right": index2 == 1
+            }),
+            tabindex: _ctx.disabled ? -1 : 0,
+            "aria-valuemin": +_ctx.min,
+            "aria-valuenow": _ctx.curValue(index2),
+            "aria-valuemax": +_ctx.max,
+            "aria-orientation": "horizontal",
+            onTouchstart: withModifiers((e) => {
+              if (typeof index2 === "number") {
+                _ctx.buttonIndex = index2;
+              }
+              _ctx.onTouchStart(e);
+            }, ["stop", "prevent"]),
+            onTouchmove: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.onTouchMove && _ctx.onTouchMove(...args), ["stop", "prevent"])),
+            onTouchend: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args), ["stop", "prevent"])),
+            onTouchcancel: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args), ["stop", "prevent"])),
+            onClick: _cache[3] || (_cache[3] = (e) => e.stopPropagation())
+          }, [
+            _ctx.$slots.button ? renderSlot(_ctx.$slots, "button", { key: 0 }) : (openBlock(), createElementBlock("view", {
+              key: 1,
+              class: "nut-range-button",
+              style: normalizeStyle(_ctx.buttonStyle)
+            }, [
+              !_ctx.hiddenTag ? (openBlock(), createElementBlock("view", _hoisted_4, toDisplayString(_ctx.curValue(index2)), 1)) : createCommentVNode("", true)
+            ], 4))
+          ], 42, _hoisted_3);
+        }), 64)) : (openBlock(), createElementBlock("view", {
+          key: 1,
+          role: "slider",
+          class: "nut-range-button-wrapper",
+          tabindex: _ctx.disabled ? -1 : 0,
+          "aria-valuemin": +_ctx.min,
+          "aria-valuenow": _ctx.curValue(),
+          "aria-valuemax": +_ctx.max,
+          "aria-orientation": "horizontal",
+          onTouchstart: _cache[4] || (_cache[4] = withModifiers((e) => {
+            _ctx.onTouchStart(e);
+          }, ["stop", "prevent"])),
+          onTouchmove: _cache[5] || (_cache[5] = withModifiers((...args) => _ctx.onTouchMove && _ctx.onTouchMove(...args), ["stop", "prevent"])),
+          onTouchend: _cache[6] || (_cache[6] = withModifiers((...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args), ["stop", "prevent"])),
+          onTouchcancel: _cache[7] || (_cache[7] = withModifiers((...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args), ["stop", "prevent"])),
+          onClick: _cache[8] || (_cache[8] = (e) => e.stopPropagation())
+        }, [
+          _ctx.$slots.button ? renderSlot(_ctx.$slots, "button", { key: 0 }) : (openBlock(), createElementBlock("view", {
+            key: 1,
+            class: "nut-range-button",
+            style: normalizeStyle(_ctx.buttonStyle)
+          }, [
+            !_ctx.hiddenTag ? (openBlock(), createElementBlock("view", _hoisted_6, toDisplayString(_ctx.curValue()), 1)) : createCommentVNode("", true)
+          ], 4))
+        ], 40, _hoisted_5))
+      ], 4)
+    ], 6),
+    !_ctx.hiddenRange ? (openBlock(), createElementBlock("view", _hoisted_7, toDisplayString(+_ctx.max), 1)) : createCommentVNode("", true)
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };