@nutui/nutui 3.1.0 → 3.1.2-3.beta-4

package/dist/packages/_es/Range.js

@@ -0,0 +1,414 @@
+/*!
+* @nutui/nutui v3.1.23.beta-4 Mon Jul 25 2022 22:38:45 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+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, 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
+    }
+  },
+  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 };

package/dist/packages/_es/Rate.js

@@ -0,0 +1,198 @@
+/*!
+* @nutui/nutui v3.1.23.beta-4 Mon Jul 25 2022 22:38:45 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+import { c as createComponent } from "./component.js";
+import { ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, normalizeStyle, createVNode, createBlock, createCommentVNode } from "vue";
+import { p as pxCheck } from "./pxCheck.js";
+import { u as useTouch } from "./index4.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+const { componentName } = createComponent("rate");
+const useComponent = (touchable = true) => {
+  return {
+    props: {
+      count: {
+        type: [String, Number],
+        default: 5
+      },
+      modelValue: {
+        type: [String, Number],
+        default: 0
+      },
+      iconSize: {
+        type: [String, Number],
+        default: 18
+      },
+      activeColor: {
+        type: String,
+        default: ""
+      },
+      voidColor: {
+        type: String,
+        default: ""
+      },
+      uncheckedIcon: {
+        type: String,
+        default: "star-n"
+      },
+      checkedIcon: {
+        type: String,
+        default: "star-fill-n"
+      },
+      readonly: {
+        type: Boolean,
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      allowHalf: {
+        type: Boolean,
+        default: false
+      },
+      touchable: {
+        type: Boolean,
+        default: true
+      },
+      spacing: {
+        type: [String, Number],
+        default: 14
+      },
+      classPrefix: {
+        type: String,
+        default: "nut-icon"
+      },
+      fontClassName: {
+        type: String,
+        default: "nutui-iconfont"
+      }
+    },
+    emits: ["update:modelValue", "change"],
+    setup(props, { emit }) {
+      const rateRefs = ref([]);
+      const classes = computed(() => {
+        const prefixCls = componentName;
+        return {
+          [prefixCls]: true
+        };
+      });
+      const updateVal = (value) => {
+        emit("update:modelValue", value);
+        emit("change", value);
+      };
+      const onClick = (e, index2) => {
+        if (props.disabled || props.readonly)
+          return;
+        let value = 0;
+        if (index2 === 1 && props.modelValue === index2)
+          ;
+        else {
+          value = index2;
+          if (props.allowHalf && e == 2) {
+            value -= 0.5;
+          }
+        }
+        updateVal(value);
+      };
+      const getScoreByPosition = (x, rateRefs2, allowHalf) => {
+        let v = 0;
+        for (let index2 = rateRefs2.value.length - 1; index2 >= 0; index2--) {
+          const item = rateRefs2.value[index2];
+          if (x > item.offsetLeft) {
+            if (allowHalf) {
+              v = index2 + (x > item.offsetLeft + item.clientWidth / 2 ? 1 : 0.5);
+            } else {
+              v = index2 + 1;
+            }
+            break;
+          }
+        }
+        return v;
+      };
+      const touch = useTouch();
+      const touchMethods = {
+        onTouchStart(event) {
+          if (!props.touchable)
+            return;
+          touch.start(event);
+        },
+        onTouchMove(event) {
+          if (!props.touchable || !touchable)
+            return;
+          touch.move(event);
+          if (touch.isHorizontal()) {
+            if (rateRefs.value) {
+              event.preventDefault();
+              updateVal(getScoreByPosition(touch.moveX.value, rateRefs, props.allowHalf));
+            }
+          }
+        }
+      };
+      const refRandomId = Math.random().toString(36).slice(-8);
+      return {
+        classes,
+        ...touchMethods,
+        onClick,
+        pxCheck,
+        rateRefs,
+        refRandomId
+      };
+    }
+  };
+};
+const component = useComponent();
+const _hoisted_1 = ["id"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.onTouchStart && _ctx.onTouchStart(...args)),
+    onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.onTouchMove && _ctx.onTouchMove(...args))
+  }, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList(Number(_ctx.count), (n) => {
+      return openBlock(), createElementBlock("view", {
+        class: "nut-rate-item",
+        key: n,
+        ref: "rateRefs",
+        id: "rateRefs-" + _ctx.refRandomId + 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,
+          name: n <= _ctx.modelValue ? _ctx.checkedIcon : _ctx.uncheckedIcon
+        }, null, 8, ["size", "onClick", "class", "color", "font-class-name", "class-prefix", "name"]),
+        _ctx.allowHalf && Number(_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 <= Number(_ctx.modelValue) + 1 ? _ctx.activeColor : _ctx.voidColor,
+          size: _ctx.iconSize,
+          name: _ctx.checkedIcon
+        }, null, 8, ["onClick", "font-class-name", "class-prefix", "color", "size", "name"])) : _ctx.allowHalf && Number(_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, ["onClick", "font-class-name", "class-prefix", "color", "size", "name"])) : createCommentVNode("", true)
+      ], 12, _hoisted_1);
+    }), 128))
+  ], 34);
+}
+const { create } = createComponent("rate");
+const _sfc_main = create(component);
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", render]]);
+export { index as default };

package/dist/packages/_es/Row.js

@@ -0,0 +1,69 @@
+/*!
+* @nutui/nutui v3.1.23.beta-4 Mon Jul 25 2022 22:38:45 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+import { provide, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+const { componentName, create } = createComponent("row");
+const _sfc_main = create({
+  props: {
+    type: {
+      type: String,
+      default: ""
+    },
+    gutter: {
+      type: [String, Number],
+      default: ""
+    },
+    justify: {
+      type: String,
+      default: "start"
+    },
+    align: {
+      type: String,
+      default: "flex-start"
+    },
+    flexWrap: {
+      type: String,
+      default: "nowrap"
+    }
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    const prefixCls = componentName;
+    provide("gutter", props.gutter);
+    const getClass = (prefix, type) => {
+      return prefix ? type ? `nut-row-${prefix}-${type}` : "" : `nut-row-${type}`;
+    };
+    const getClasses = () => {
+      return `
+              ${getClass("", props.type)}
+              ${getClass("justify", props.justify)}
+              ${getClass("align", props.align)}
+              ${getClass("flex", props.flexWrap)}
+              ${prefixCls}
+              `;
+    };
+    const handleClick = (evt) => {
+      evt.stopPropagation();
+      emit("click", evt);
+    };
+    return {
+      getClasses,
+      handleClick
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.getClasses()),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };