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

package/dist/packages/_es/Pagination.js

@@ -0,0 +1,165 @@
+/*!
+* @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 { toRefs, computed, watchEffect, openBlock, createElementBlock, createElementVNode, normalizeClass, renderSlot, createTextVNode, toDisplayString, Fragment, renderList, createCommentVNode } 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, translate } = createComponent("pagination");
+const _sfc_main = create({
+  props: {
+    modelValue: {
+      type: Number,
+      default: 1
+    },
+    mode: {
+      type: String,
+      default: "multi"
+    },
+    prevText: {
+      type: String,
+      default: ""
+    },
+    nextText: {
+      type: String,
+      default: ""
+    },
+    pageCount: {
+      type: [String, Number],
+      default: ""
+    },
+    totalItems: {
+      type: [String, Number],
+      default: "0"
+    },
+    itemsPerPage: {
+      type: [String, Number],
+      default: "10"
+    },
+    showPageSize: {
+      type: [String, Number],
+      default: "5"
+    },
+    forceEllipses: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {},
+  emits: ["change", "update:modelValue"],
+  setup(props, { emit }) {
+    const { modelValue, mode, showPageSize, forceEllipses } = toRefs(props);
+    const countRef = computed(() => {
+      const { pageCount, totalItems, itemsPerPage } = toRefs(props);
+      const num = +pageCount.value || Math.ceil(+totalItems.value / +itemsPerPage.value);
+      return Math.max(1, num);
+    });
+    const select = (curPage, isSelect) => {
+      if (curPage > countRef.value || curPage < 1)
+        return;
+      if (curPage != modelValue.value)
+        emit("update:modelValue", curPage);
+      if (isSelect)
+        emit("change", curPage);
+    };
+    const setPage = (number, text, active) => {
+      return { number, text, active };
+    };
+    const pages = computed(() => {
+      if (mode.value == "simple")
+        return;
+      let items = [];
+      const pageCount = countRef.value;
+      const pageSize = showPageSize.value;
+      let startPage = 1;
+      let endPage = pageCount;
+      const partialShow = pageCount > pageSize;
+      if (partialShow) {
+        startPage = Math.max(modelValue.value - Math.floor(pageSize / 2), 1);
+        endPage = startPage + pageSize - 1;
+        if (endPage > pageCount) {
+          endPage = pageCount;
+          startPage = endPage - pageSize + 1;
+        }
+      }
+      for (var i = startPage; i <= endPage; i++) {
+        const page = setPage(i, i, modelValue.value == i);
+        items.push(page);
+      }
+      if (partialShow && pageSize > 0 && forceEllipses.value) {
+        if (startPage > 1) {
+          const prevPage = setPage(startPage - 1, "...");
+          items.unshift(prevPage);
+        }
+        if (endPage < pageCount) {
+          const nextPage = setPage(endPage + 1, "...");
+          items.push(nextPage);
+        }
+      }
+      return items;
+    });
+    watchEffect(() => {
+      select(modelValue.value, false);
+    });
+    return {
+      modelValue,
+      select,
+      countRef,
+      mode,
+      pages,
+      forceEllipses,
+      translate
+    };
+  }
+});
+const _hoisted_1 = { class: "nut-pagination" };
+const _hoisted_2 = {
+  key: 0,
+  class: "nut-pagination-contain"
+};
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = {
+  key: 1,
+  class: "nut-pagination-contain"
+};
+const _hoisted_5 = { class: "nut-pagination-simple" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", _hoisted_1, [
+    createElementVNode("view", {
+      class: normalizeClass(["nut-pagination-prev", _ctx.mode == "multi" ? "" : "simple-border", _ctx.modelValue == 1 ? "disabled" : ""]),
+      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.select(_ctx.modelValue - 1, true))
+    }, [
+      renderSlot(_ctx.$slots, "prev-text", {}, () => [
+        createTextVNode(toDisplayString(_ctx.prevText || _ctx.translate("prev")), 1)
+      ])
+    ], 2),
+    _ctx.mode == "multi" ? (openBlock(), createElementBlock("view", _hoisted_2, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.pages, (item, index2) => {
+        return openBlock(), createElementBlock("view", {
+          key: index2 + "pagination",
+          class: normalizeClass(["nut-pagination-item", item.active ? "active" : ""]),
+          onClick: ($event) => _ctx.select(item.number, true)
+        }, [
+          renderSlot(_ctx.$slots, "page", { item }, () => [
+            createTextVNode(toDisplayString(item.text), 1)
+          ])
+        ], 10, _hoisted_3);
+      }), 128))
+    ])) : createCommentVNode("", true),
+    _ctx.mode == "simple" ? (openBlock(), createElementBlock("view", _hoisted_4, [
+      createElementVNode("view", _hoisted_5, toDisplayString(_ctx.modelValue) + "/" + toDisplayString(_ctx.countRef), 1)
+    ])) : createCommentVNode("", true),
+    createElementVNode("view", {
+      class: normalizeClass(["nut-pagination-next", _ctx.modelValue >= _ctx.countRef ? "disabled" : ""]),
+      onClick: _cache[1] || (_cache[1] = ($event) => _ctx.select(_ctx.modelValue + 1, true))
+    }, [
+      renderSlot(_ctx.$slots, "next-text", {}, () => [
+        createTextVNode(toDisplayString(_ctx.nextText || _ctx.translate("next")), 1)
+      ])
+    ], 2)
+  ]);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Picker.js

@@ -0,0 +1,508 @@
+/*!
+* @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, reactive, computed, watch, onMounted, toRefs, openBlock, createElementBlock, createElementVNode, normalizeStyle, Fragment, renderList, normalizeClass, toDisplayString, createCommentVNode, onBeforeUnmount, resolveComponent, createVNode, withCtx, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import Popup, { popupProps } from "./Popup.js";
+import { u as useTouch } from "./index4.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+import "./OverLay.js";
+import "./Icon.js";
+import "./pxCheck.js";
+const { create: create$1 } = createComponent("picker-column");
+const _sfc_main$1 = create$1({
+  props: {
+    value: [String, Number],
+    columnsType: String,
+    itemShow: {
+      type: Boolean,
+      default: false
+    },
+    column: {
+      type: Array,
+      default: () => []
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    threeDimensional: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["click", "change"],
+  setup(props, { emit }) {
+    const touch = useTouch();
+    const wrapper = ref();
+    const state = reactive({
+      touchParams: {
+        startY: 0,
+        endY: 0,
+        startTime: 0,
+        endTime: 0,
+        lastY: 0,
+        lastTime: 0
+      },
+      currIndex: 1,
+      transformY: 0,
+      scrollDistance: 0,
+      lineSpacing: 36,
+      rotation: 20,
+      timer: null
+    });
+    const roller = ref(null);
+    const list = ref(null);
+    const moving = ref(false);
+    const touchDeg = ref(0);
+    const touchTime = ref(0);
+    const INERTIA_TIME = 300;
+    const INERTIA_DISTANCE = 15;
+    const touchRollerStyle = computed(() => {
+      return {
+        transition: `transform ${touchTime.value}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
+        transform: `rotate3d(1, 0, 0, ${touchDeg.value})`
+      };
+    });
+    const touchTileStyle = computed(() => {
+      return {
+        transition: `transform ${touchTime.value}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
+        transform: `translate3d(0, ${state.scrollDistance}px, 0)`
+      };
+    });
+    const setRollerStyle = (index) => {
+      return `transform: rotate3d(1, 0, 0, ${-state.rotation * index}deg) translate3d(0px, 0px, 104px)`;
+    };
+    const onTouchStart = (event) => {
+      touch.start(event);
+      if (moving.value) {
+        let dom = list.value;
+        if (!props.threeDimensional) {
+          dom = roller.value;
+        }
+        const { transform } = window.getComputedStyle(dom);
+        state.scrollDistance = +transform.slice(7, transform.length - 1).split(", ")[5];
+      }
+      state.touchParams.startY = touch.deltaY.value;
+      state.touchParams.startTime = Date.now();
+      state.transformY = state.scrollDistance;
+    };
+    const onTouchMove = (event) => {
+      touch.move(event);
+      if (touch.isVertical) {
+        moving.value = true;
+        preventDefault(event, true);
+      }
+      state.touchParams.lastY = touch.deltaY.value;
+      let move = state.touchParams.lastY - state.touchParams.startY;
+      setMove(move);
+    };
+    const onTouchEnd = (event) => {
+      state.touchParams.lastY = touch.deltaY.value;
+      state.touchParams.lastTime = Date.now();
+      let move = state.touchParams.lastY - state.touchParams.startY;
+      let moveTime = state.touchParams.lastTime - state.touchParams.startTime;
+      if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {
+        const distance = momentum(move, moveTime);
+        setMove(distance, "end", moveTime + 1e3);
+        return;
+      } else {
+        setMove(move, "end");
+      }
+      setTimeout(() => {
+        touch.reset();
+        moving.value = false;
+      }, 0);
+    };
+    const momentum = (distance, duration) => {
+      const speed = Math.abs(distance / duration);
+      distance = speed / 3e-3 * (distance < 0 ? -1 : 1);
+      return distance;
+    };
+    const isHidden = (index) => {
+      if (index >= state.currIndex + 8 || index <= state.currIndex - 8) {
+        return true;
+      } else {
+        return false;
+      }
+    };
+    const setTransform = (translateY = 0, type, time = 1e3, deg) => {
+      if (type === "end") {
+        touchTime.value = time;
+      } else {
+        touchTime.value = 0;
+      }
+      touchDeg.value = deg;
+      state.scrollDistance = translateY;
+    };
+    const setMove = (move, type, time) => {
+      let updateMove = move + state.transformY;
+      if (type === "end") {
+        if (updateMove > 0) {
+          updateMove = 0;
+        }
+        if (updateMove < -(props.column.length - 1) * state.lineSpacing) {
+          updateMove = -(props.column.length - 1) * state.lineSpacing;
+        }
+        let endMove = Math.round(updateMove / state.lineSpacing) * state.lineSpacing;
+        let deg = `${(Math.abs(Math.round(endMove / state.lineSpacing)) + 1) * state.rotation}deg`;
+        setTransform(endMove, type, time, deg);
+        state.currIndex = Math.abs(Math.round(endMove / state.lineSpacing)) + 1;
+      } else {
+        let deg = 0;
+        let currentDeg = (-updateMove / state.lineSpacing + 1) * state.rotation;
+        const maxDeg = (props.column.length + 1) * state.rotation;
+        const minDeg = 0;
+        deg = Math.min(Math.max(currentDeg, minDeg), maxDeg);
+        if (minDeg < deg && deg < maxDeg) {
+          setTransform(updateMove, null, void 0, deg + "deg");
+          state.currIndex = Math.abs(Math.round(updateMove / state.lineSpacing)) + 1;
+        }
+      }
+    };
+    const setChooseValue = () => {
+      emit("change", props.column[state.currIndex - 1]);
+    };
+    const modifyStatus = (type) => {
+      const { column: column2 } = props;
+      let index = column2.findIndex((columnItem) => columnItem.value == props.value);
+      state.currIndex = index === -1 ? 1 : index + 1;
+      let move = index === -1 ? 0 : index * state.lineSpacing;
+      type && setChooseValue();
+      setMove(-move);
+    };
+    const preventDefault = (event, isStopPropagation) => {
+      if (typeof event.cancelable !== "boolean" || event.cancelable) {
+        event.preventDefault();
+      }
+      if (isStopPropagation) {
+        event.stopPropagation();
+      }
+    };
+    const stopMomentum = () => {
+      moving.value = false;
+      setChooseValue();
+    };
+    watch(() => props.column, (val) => {
+      console.log("props.column\u53D8\u5316", props.column);
+      state.transformY = 0;
+      modifyStatus(false);
+    }, {
+      deep: true
+    });
+    onMounted(() => {
+      modifyStatus(true);
+    });
+    return {
+      ...toRefs(state),
+      ...toRefs(props),
+      wrapper,
+      setRollerStyle,
+      isHidden,
+      roller,
+      list,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      touchRollerStyle,
+      touchTileStyle,
+      setMove,
+      stopMomentum
+    };
+  }
+});
+const _hoisted_1$1 = {
+  key: 1,
+  class: "nut-picker-roller-item-tile"
+};
+const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("view", { class: "nut-picker-roller-mask" }, null, -1);
+const _hoisted_3$1 = {
+  key: 0,
+  class: "nut-picker-content"
+};
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: "nut-picker__list",
+    onTouchstart: _cache[1] || (_cache[1] = (...args) => _ctx.onTouchStart && _ctx.onTouchStart(...args)),
+    onTouchmove: _cache[2] || (_cache[2] = (...args) => _ctx.onTouchMove && _ctx.onTouchMove(...args)),
+    onTouchend: _cache[3] || (_cache[3] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args))
+  }, [
+    createElementVNode("view", {
+      class: "nut-picker-roller",
+      ref: "roller",
+      style: normalizeStyle(_ctx.threeDimensional ? _ctx.touchRollerStyle : _ctx.touchTileStyle),
+      onTransitionend: _cache[0] || (_cache[0] = (...args) => _ctx.stopMomentum && _ctx.stopMomentum(...args))
+    }, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.column, (item, index) => {
+        return openBlock(), createElementBlock(Fragment, {
+          key: item.value ? item.value : index
+        }, [
+          item && item.text && _ctx.threeDimensional ? (openBlock(), createElementBlock("view", {
+            key: 0,
+            class: normalizeClass(["nut-picker-roller-item", { "nut-picker-roller-item-hidden": _ctx.isHidden(index + 1) }]),
+            style: normalizeStyle(_ctx.setRollerStyle(index + 1))
+          }, toDisplayString(item.text), 7)) : createCommentVNode("", true),
+          item && item.text && !_ctx.threeDimensional ? (openBlock(), createElementBlock("view", _hoisted_1$1, toDisplayString(item.text), 1)) : createCommentVNode("", true)
+        ], 64);
+      }), 128))
+    ], 36),
+    _hoisted_2$1,
+    _ctx.threeDimensional ? (openBlock(), createElementBlock("view", _hoisted_3$1, [
+      createElementVNode("view", {
+        class: "nut-picker-list-panel",
+        ref: "list",
+        style: normalizeStyle(_ctx.touchTileStyle)
+      }, null, 4)
+    ])) : createCommentVNode("", true)
+  ], 32);
+}
+var column = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const { componentName, create, translate } = createComponent("picker");
+const _sfc_main = create({
+  components: {
+    [column.name]: column,
+    [Popup.name]: Popup
+  },
+  props: {
+    ...popupProps,
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    cancelText: {
+      type: String,
+      default: ""
+    },
+    okText: {
+      type: String,
+      default: ""
+    },
+    columns: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    threeDimensional: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["close", "change", "confirm", "update:visible", "update:modelValue"],
+  setup(props, { emit }) {
+    const state = reactive({
+      show: false,
+      formattedColumns: props.columns
+    });
+    let defaultValues = ref(props.modelValue);
+    ref();
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const selectedOptions = computed(() => {
+      let optins = [];
+      columnsList.value.map((column2, index) => {
+        let currOptions = [];
+        currOptions = column2.filter((item) => item.value == defaultValues.value[index]);
+        optins.push(currOptions[0]);
+      });
+      return optins;
+    });
+    const columnsType = computed(() => {
+      const firstColumn = state.formattedColumns[0];
+      if (firstColumn) {
+        if (Array.isArray(firstColumn)) {
+          return "multiple";
+        }
+        if ("children" in firstColumn) {
+          return "cascade";
+        }
+      }
+      return "single";
+    });
+    const columnsList = computed(() => {
+      switch (columnsType.value) {
+        case "multiple":
+          return state.formattedColumns;
+        case "cascade":
+          return formatCascade(state.formattedColumns, defaultValues.value);
+        default:
+          return [state.formattedColumns];
+      }
+    });
+    const formatCascade = (columns, defaultValues2) => {
+      const formatted = [];
+      let cursor = {
+        text: "",
+        value: "",
+        children: columns
+      };
+      let columnIndex = 0;
+      while (cursor && cursor.children) {
+        const options = cursor.children;
+        const value = defaultValues2[columnIndex];
+        let index = options.findIndex((columnItem) => columnItem.value == value);
+        if (index == -1)
+          index = 0;
+        cursor = cursor.children[index];
+        columnIndex++;
+        formatted.push(options);
+      }
+      return formatted;
+    };
+    const close = () => {
+      emit("close", {
+        selectedValue: defaultValues.value,
+        selectedOptions: selectedOptions.value
+      });
+      emit("update:visible", false);
+    };
+    const changeHandler = (columnIndex, option) => {
+      if (option && Object.keys(option).length) {
+        if (columnsType.value === "cascade") {
+          defaultValues.value[columnIndex] = option.value ? option.value : "";
+          let index = columnIndex;
+          let cursor = option;
+          while (cursor && cursor.children) {
+            defaultValues.value[index + 1] = cursor.children[0].value;
+            index++;
+            cursor = cursor.children[0];
+          }
+        } else {
+          defaultValues.value[columnIndex] = option.hasOwnProperty("value") ? option.value : "";
+        }
+        emit("change", {
+          columnIndex,
+          selectedValue: defaultValues.value,
+          selectedOptions: selectedOptions.value
+        });
+      }
+    };
+    const confirmHandler = () => {
+      emit("confirm", {
+        selectedValue: defaultValues.value,
+        selectedOptions: selectedOptions.value
+      });
+      emit("update:visible", false);
+    };
+    onMounted(() => {
+      if (props.visible)
+        state.show = props.visible;
+    });
+    onBeforeUnmount(() => {
+      if (props.visible)
+        state.show = false;
+    });
+    watch(() => props.modelValue, (newValues) => {
+      const isSameValue = JSON.stringify(newValues) === JSON.stringify(defaultValues.value);
+      if (!isSameValue) {
+        defaultValues.value = newValues;
+      }
+    }, { deep: true });
+    watch(defaultValues, (newValues) => {
+      const isSameValue = JSON.stringify(newValues) === JSON.stringify(props.modelValue);
+      if (!isSameValue) {
+        emit("update:modelValue", newValues);
+      }
+    }, { immediate: true });
+    watch(() => props.visible, (val) => {
+      state.show = val;
+    });
+    watch(() => props.columns, (val) => {
+      if (val.length)
+        state.formattedColumns = val;
+    });
+    return {
+      classes,
+      ...toRefs(state),
+      column,
+      columnsType,
+      columnsList,
+      close,
+      changeHandler,
+      confirmHandler,
+      defaultValues,
+      translate
+    };
+  }
+});
+const _hoisted_1 = { class: "nut-picker__bar" };
+const _hoisted_2 = { class: "nut-picker__title" };
+const _hoisted_3 = {
+  class: "nut-picker__column",
+  ref: "wrapHeight"
+};
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("view", { class: "nut-picker__hairline" }, null, -1);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_picker_column = resolveComponent("nut-picker-column");
+  const _component_nut_popup = resolveComponent("nut-popup");
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes)
+  }, [
+    createVNode(_component_nut_popup, {
+      position: "bottom",
+      visible: _ctx.show,
+      "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => _ctx.show = $event),
+      teleport: _ctx.teleport,
+      "lock-scroll": _ctx.lockScroll,
+      "close-on-click-overlay": _ctx.closeOnClickOverlay,
+      onClose: _ctx.close,
+      round: true,
+      isWrapTeleport: _ctx.isWrapTeleport
+    }, {
+      default: withCtx(() => [
+        createElementVNode("view", _hoisted_1, [
+          createElementVNode("view", {
+            class: "nut-picker__cancel nut-picker__left nut-picker__button",
+            onClick: _cache[0] || (_cache[0] = (...args) => _ctx.close && _ctx.close(...args))
+          }, toDisplayString(_ctx.cancelText || _ctx.translate("cancel")), 1),
+          createElementVNode("view", _hoisted_2, toDisplayString(_ctx.title), 1),
+          createElementVNode("view", {
+            class: "nut-picker__confirm nut-picker__right nut-picker__button",
+            onClick: _cache[1] || (_cache[1] = ($event) => _ctx.confirmHandler())
+          }, toDisplayString(_ctx.okText || _ctx.translate("confirm")), 1)
+        ]),
+        renderSlot(_ctx.$slots, "top"),
+        createElementVNode("view", _hoisted_3, [
+          _hoisted_4,
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columnsList, (column2, columnIndex) => {
+            return openBlock(), createElementBlock("view", {
+              class: "nut-picker__columnitem",
+              key: columnIndex
+            }, [
+              createVNode(_component_nut_picker_column, {
+                itemShow: _ctx.show,
+                column: column2,
+                readonly: _ctx.readonly,
+                columnsType: _ctx.columnsType,
+                value: _ctx.defaultValues[columnIndex],
+                threeDimensional: _ctx.threeDimensional,
+                onChange: (option) => {
+                  _ctx.changeHandler(columnIndex, option);
+                }
+              }, null, 8, ["itemShow", "column", "readonly", "columnsType", "value", "threeDimensional", "onChange"])
+            ]);
+          }), 128))
+        ], 512),
+        renderSlot(_ctx.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["visible", "teleport", "lock-scroll", "close-on-click-overlay", "onClose", "isWrapTeleport"])
+  ], 2);
+}
+var Picker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { Picker as default };