@nutui/nutui 3.1.18-beta.0 → 3.1.19-beta.1

package/dist/packages/_es/Range.js

@@ -18,14 +18,15 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 /*!
-* @nutui/nutui v3.1.18-beta.0 Tue Mar 08 2022 10:41:31 GMT+0800 (中国标准时间)
-* (c) 2021 @jdf2e.
+* @nutui/nutui v3.1.19-beta.1 Sat Apr 02 2022 16:26:37 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { ref, computed, toRefs, openBlock, createElementBlock, toDisplayString, createCommentVNode, createElementVNode, normalizeStyle, normalizeClass, withModifiers, Fragment, renderList, renderSlot } from "vue";
+import Taro from "@tarojs/taro";
+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 "./index3.js";
+import { u as useTouch } from "./index3.js";
+import { u as useTaroRect } from "./index.js";
 import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 const { componentName, create } = createComponent("range");
 const _sfc_main = create({
@@ -38,6 +39,14 @@ const _sfc_main = create({
     activeColor: String,
     inactiveColor: String,
     buttonColor: String,
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    marks: {
+      type: Object,
+      default: {}
+    },
     hiddenRange: {
       type: Boolean,
       default: false
@@ -71,15 +80,29 @@ const _sfc_main = create({
     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
@@ -106,13 +129,67 @@ const _sfc_main = create({
       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 {
-        width: calcMainAxis(),
-        left: calcOffset(),
-        background: props.activeColor,
-        transition: dragStatus.value ? "none" : void 0
+        [`${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));
@@ -138,14 +215,20 @@ const _sfc_main = create({
         emit("change", value);
       }
     };
-    const onClick = (event) => {
+    const onClick = async (event) => {
       if (props.disabled) {
         return;
       }
       const { min, modelValue } = props;
-      const rect = useRect(root);
-      const delta = event.clientX - rect.left;
-      const total = rect.width;
+      const rect = await useTaroRect(root, Taro);
+      let delta = event.touches[0].clientX - rect.left;
+      let total = rect.width;
+      console.log(delta);
+      console.log(total);
+      if (props.vertical) {
+        delta = event.touches[0].clientY - rect.top;
+        total = rect.height;
+      }
       const value = Number(min) + delta / total * scope.value;
       if (isRange(modelValue)) {
         const [left, right] = modelValue;
@@ -171,8 +254,10 @@ const _sfc_main = create({
         startValue = format(currentValue);
       }
       dragStatus.value = "start";
+      event.stopPropagation();
+      event.preventDefault();
     };
-    const onTouchMove = (event) => {
+    const onTouchMove = async (event) => {
       if (props.disabled) {
         return;
       }
@@ -181,10 +266,15 @@ const _sfc_main = create({
       }
       touch.move(event);
       dragStatus.value = "draging";
-      const rect = useRect(root);
-      const delta = touch.deltaX.value;
-      const total = rect.width;
-      const diff = delta / total * scope.value;
+      const rect = await useTaroRect(root, Taro);
+      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 {
@@ -194,7 +284,7 @@ const _sfc_main = create({
       event.stopPropagation();
       event.preventDefault();
     };
-    const onTouchEnd = () => {
+    const onTouchEnd = (event) => {
       if (props.disabled) {
         return;
       }
@@ -203,11 +293,14 @@ const _sfc_main = create({
         emit("drag-end");
       }
       dragStatus.value = "";
+      event.stopPropagation();
+      event.preventDefault();
     };
     const curValue = (idx) => {
       const value = typeof idx === "number" ? props.modelValue[idx] : props.modelValue;
       return value;
     };
+    const refRandomId = Math.random().toString(36).slice(-8);
     return __spreadProps(__spreadValues({
       root,
       classes,
@@ -220,58 +313,87 @@ const _sfc_main = create({
     }, toRefs(props)), {
       barStyle,
       curValue,
-      buttonIndex
+      buttonIndex,
+      containerClasses,
+      markClassName,
+      marksStyle,
+      marksList,
+      tickStyle,
+      refRandomId
     });
   }
 });
-const _hoisted_1 = { class: "nut-range-container" };
-const _hoisted_2 = {
+const _hoisted_1 = {
   key: 0,
   class: "min"
 };
-const _hoisted_3 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "onTouchstart"];
-const _hoisted_4 = {
+const _hoisted_2 = ["id"];
+const _hoisted_3 = {
   key: 0,
-  class: "number"
+  class: "nut-range-mark"
 };
-const _hoisted_5 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax"];
-const _hoisted_6 = {
+const _hoisted_4 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "onTouchstart"];
+const _hoisted_5 = {
   key: 0,
   class: "number"
 };
+const _hoisted_6 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax"];
 const _hoisted_7 = {
+  key: 0,
+  class: "number"
+};
+const _hoisted_8 = {
   key: 1,
   class: "max"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("view", _hoisted_1, [
-    !_ctx.hiddenRange ? (openBlock(), createElementBlock("view", _hoisted_2, toDisplayString(+_ctx.min), 1)) : createCommentVNode("", true),
+  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",
+      id: "root-" + _ctx.refRandomId,
       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_3, [
+        (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) => {
+        _ctx.range ? (openBlock(), createElementBlock(Fragment, { key: 0 }, renderList([0, 1], (index) => {
           return createElementVNode("view", {
-            key: index2,
+            key: index,
             role: "slider",
             class: normalizeClass({
-              "nut-range-button-wrapper-left": index2 == 0,
-              "nut-range-button-wrapper-right": index2 == 1
+              "nut-range-button-wrapper-left": index == 0,
+              "nut-range-button-wrapper-right": index == 1
             }),
+            "catch-move": true,
             tabindex: _ctx.disabled ? -1 : 0,
             "aria-valuemin": +_ctx.min,
-            "aria-valuenow": _ctx.curValue(index2),
+            "aria-valuenow": _ctx.curValue(index),
             "aria-valuemax": +_ctx.max,
             "aria-orientation": "horizontal",
             onTouchstart: withModifiers((e) => {
-              if (typeof index2 === "number") {
-                _ctx.buttonIndex = index2;
+              if (typeof index === "number") {
+                _ctx.buttonIndex = index;
               }
               _ctx.onTouchStart(e);
             }, ["stop", "prevent"]),
@@ -285,9 +407,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               class: "nut-range-button",
               style: normalizeStyle(_ctx.buttonStyle)
             }, [
-              !_ctx.hiddenTag ? (openBlock(), createElementBlock("view", _hoisted_4, toDisplayString(_ctx.curValue(index2)), 1)) : createCommentVNode("", true)
+              !_ctx.hiddenTag ? (openBlock(), createElementBlock("view", _hoisted_5, toDisplayString(_ctx.curValue(index)), 1)) : createCommentVNode("", true)
             ], 4))
-          ], 42, _hoisted_3);
+          ], 42, _hoisted_4);
         }), 64)) : (openBlock(), createElementBlock("view", {
           key: 1,
           role: "slider",
@@ -297,6 +419,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           "aria-valuenow": _ctx.curValue(),
           "aria-valuemax": +_ctx.max,
           "aria-orientation": "horizontal",
+          "catch-move": true,
           onTouchstart: _cache[4] || (_cache[4] = withModifiers((e) => {
             _ctx.onTouchStart(e);
           }, ["stop", "prevent"])),
@@ -310,13 +433,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             class: "nut-range-button",
             style: normalizeStyle(_ctx.buttonStyle)
           }, [
-            !_ctx.hiddenTag ? (openBlock(), createElementBlock("view", _hoisted_6, toDisplayString(_ctx.curValue()), 1)) : createCommentVNode("", true)
+            !_ctx.hiddenTag ? (openBlock(), createElementBlock("view", _hoisted_7, toDisplayString(_ctx.curValue()), 1)) : createCommentVNode("", true)
           ], 4))
-        ], 40, _hoisted_5))
+        ], 40, _hoisted_6))
       ], 4)
-    ], 6),
-    !_ctx.hiddenRange ? (openBlock(), createElementBlock("view", _hoisted_7, toDisplayString(+_ctx.max), 1)) : createCommentVNode("", true)
-  ]);
+    ], 14, _hoisted_2),
+    !_ctx.hiddenRange ? (openBlock(), createElementBlock("view", _hoisted_8, toDisplayString(+_ctx.max), 1)) : createCommentVNode("", true)
+  ], 2);
 }
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index as default };
+var index_taro = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index_taro as default };

package/dist/packages/_es/Rate.js

@@ -1,6 +1,6 @@
 /*!
-* @nutui/nutui v3.1.18-beta.0 Tue Mar 08 2022 10:41:31 GMT+0800 (中国标准时间)
-* (c) 2021 @jdf2e.
+* @nutui/nutui v3.1.19-beta.1 Sat Apr 02 2022 16:26:37 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
 import { computed, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, normalizeStyle, createVNode, createBlock, createCommentVNode } from "vue";
@@ -71,20 +71,16 @@ const _sfc_main = create({
         [prefixCls]: true
       };
     });
-    const onClick = (e, index2) => {
-      e.preventDefault();
-      e.stopPropagation();
+    const onClick = (e, index) => {
       if (props.disabled || props.readonly)
         return;
       let value = 0;
-      if (index2 === 1 && props.modelValue === index2)
+      if (index === 1 && props.modelValue === index)
         ;
       else {
-        value = index2;
-        if (props.allowHalf) {
-          if ((e == null ? void 0 : e.target).className.includes("__icon--half")) {
-            value -= 0.5;
-          }
+        value = index;
+        if (props.allowHalf && e == 2) {
+          value -= 0.5;
         }
       }
       emit("update:modelValue", value);
@@ -97,7 +93,6 @@ const _sfc_main = create({
     };
   }
 });
-const _hoisted_1 = ["onClick"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_nut_icon = resolveComponent("nut-icon");
   return openBlock(), createElementBlock("view", {
@@ -107,37 +102,39 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       return openBlock(), createElementBlock("view", {
         class: "nut-rate-item",
         key: n,
-        onClick: ($event) => _ctx.onClick($event, n),
         style: normalizeStyle({ marginRight: _ctx.pxCheck(_ctx.spacing) })
       }, [
         createVNode(_component_nut_icon, {
           size: _ctx.iconSize,
           class: normalizeClass(["nut-rate-item__icon", { "nut-rate-item__icon--disabled": _ctx.disabled || n > _ctx.modelValue }]),
+          onClick: ($event) => _ctx.onClick(1, n),
+          color: n <= _ctx.modelValue ? _ctx.activeColor : _ctx.voidColor,
           "font-class-name": _ctx.fontClassName,
           "class-prefix": _ctx.classPrefix,
-          color: n <= _ctx.modelValue ? _ctx.activeColor : _ctx.voidColor,
           name: n <= _ctx.modelValue ? _ctx.checkedIcon : _ctx.uncheckedIcon
-        }, null, 8, ["size", "class", "font-class-name", "class-prefix", "color", "name"]),
+        }, null, 8, ["size", "onClick", "class", "color", "font-class-name", "class-prefix", "name"]),
         _ctx.allowHalf && _ctx.modelValue + 1 > n ? (openBlock(), createBlock(_component_nut_icon, {
           key: 0,
           class: "nut-rate-item__icon nut-rate-item__icon--half",
+          onClick: ($event) => _ctx.onClick(2, n),
           "font-class-name": _ctx.fontClassName,
           "class-prefix": _ctx.classPrefix,
           color: n <= _ctx.modelValue + 1 ? _ctx.activeColor : _ctx.voidColor,
           size: _ctx.iconSize,
           name: _ctx.checkedIcon
-        }, null, 8, ["font-class-name", "class-prefix", "color", "size", "name"])) : _ctx.allowHalf && _ctx.modelValue + 1 < n ? (openBlock(), createBlock(_component_nut_icon, {
+        }, null, 8, ["onClick", "font-class-name", "class-prefix", "color", "size", "name"])) : _ctx.allowHalf && _ctx.modelValue + 1 < n ? (openBlock(), createBlock(_component_nut_icon, {
           key: 1,
           class: "nut-rate-item__icon nut-rate-item__icon--disabled nut-rate-item__icon--half",
+          onClick: ($event) => _ctx.onClick(2, n),
           "font-class-name": _ctx.fontClassName,
           "class-prefix": _ctx.classPrefix,
           color: _ctx.voidColor,
           size: _ctx.iconSize,
           name: _ctx.uncheckedIcon
-        }, null, 8, ["font-class-name", "class-prefix", "color", "size", "name"])) : createCommentVNode("", true)
-      ], 12, _hoisted_1);
+        }, null, 8, ["onClick", "font-class-name", "class-prefix", "color", "size", "name"])) : createCommentVNode("", true)
+      ], 4);
     }), 128))
   ], 2);
 }
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index as default };
+var index_taro = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index_taro as default };

package/dist/packages/_es/Row.js

@@ -1,6 +1,6 @@
 /*!
-* @nutui/nutui v3.1.18-beta.0 Tue Mar 08 2022 10:41:31 GMT+0800 (中国标准时间)
-* (c) 2021 @jdf2e.
+* @nutui/nutui v3.1.19-beta.1 Sat Apr 02 2022 16:26:37 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
 import { provide, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";

package/dist/packages/_es/SearchBar.js

@@ -18,8 +18,8 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 /*!
-* @nutui/nutui v3.1.18-beta.0 Tue Mar 08 2022 10:41:31 GMT+0800 (中国标准时间)
-* (c) 2021 @jdf2e.
+* @nutui/nutui v3.1.19-beta.1 Sat Apr 02 2022 16:26:37 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
 import { reactive, computed, toRefs, resolveComponent, openBlock, createElementBlock, normalizeStyle, renderSlot, createCommentVNode, createElementVNode, withModifiers, withDirectives, createVNode, vShow } from "vue";
@@ -154,7 +154,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createElementVNode("view", _hoisted_3, [
         createElementVNode("form", {
           action: "#",
-          onSubmit: _cache[3] || (_cache[3] = withModifiers((...args) => _ctx.handleSubmit && _ctx.handleSubmit(...args), ["prevent"]))
+          onsubmit: "return false",
+          onSubmit: _cache[4] || (_cache[4] = withModifiers((...args) => _ctx.handleSubmit && _ctx.handleSubmit(...args), ["prevent"]))
         }, [
           createElementVNode("input", {
             class: "nut-searchbar__input-bar",
@@ -164,12 +165,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             value: _ctx.modelValue,
             onInput: _cache[0] || (_cache[0] = (...args) => _ctx.valueChange && _ctx.valueChange(...args)),
             onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.valueFocus && _ctx.valueFocus(...args)),
-            onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.valueBlur && _ctx.valueBlur(...args))
+            onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.valueBlur && _ctx.valueBlur(...args)),
+            onConfirm: _cache[3] || (_cache[3] = (...args) => _ctx.handleSubmit && _ctx.handleSubmit(...args))
           }, null, 40, _hoisted_4)
         ], 32),
         _ctx.clearable ? withDirectives((openBlock(), createElementBlock("view", {
           key: 0,
-          onClick: _cache[4] || (_cache[4] = (...args) => _ctx.handleClear && _ctx.handleClear(...args)),
+          onClick: _cache[5] || (_cache[5] = (...args) => _ctx.handleClear && _ctx.handleClear(...args)),
           class: "nut-searchbar__input-clear"
         }, [
           createVNode(_component_nut_icon, {
@@ -190,5 +192,5 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])) : createCommentVNode("", true)
   ], 4);
 }
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index as default };
+var index_taro = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index_taro as default };