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

package/dist/packages/_es/DatePicker.js

@@ -0,0 +1,332 @@
+/*!
+* @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 { reactive, computed, onBeforeMount, watch, toRefs, resolveComponent, openBlock, createBlock, withCtx, renderSlot } from "vue";
+import Picker from "./Picker.js";
+import { popupProps } from "./Popup.js";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "./index4.js";
+import "./OverLay.js";
+import "../locale/lang";
+import "./Icon.js";
+import "./pxCheck.js";
+function padZero(num, targetLength = 2) {
+  let str = num + "";
+  while (str.length < targetLength) {
+    str = "0" + str;
+  }
+  return str;
+}
+const { componentName, create, translate } = createComponent("datepicker");
+const currentYear = new Date().getFullYear();
+function isDate(val) {
+  return Object.prototype.toString.call(val) === "[object Date]" && !isNaN(val.getTime());
+}
+const zhCNType = {
+  day: translate("day"),
+  year: translate("year"),
+  month: translate("month"),
+  hour: translate("hour"),
+  minute: translate("minute"),
+  seconds: translate("seconds")
+};
+const _sfc_main = create({
+  components: {
+    [Picker.name]: Picker
+  },
+  props: {
+    ...popupProps,
+    modelValue: null,
+    title: {
+      type: String,
+      default: ""
+    },
+    okText: {
+      type: String,
+      default: ""
+    },
+    cancelText: {
+      type: String,
+      default: ""
+    },
+    type: {
+      type: String,
+      default: "date"
+    },
+    isShowChinese: {
+      type: Boolean,
+      default: false
+    },
+    minuteStep: {
+      type: Number,
+      default: 1
+    },
+    minDate: {
+      type: Date,
+      default: () => new Date(currentYear - 10, 0, 1),
+      validator: isDate
+    },
+    maxDate: {
+      type: Date,
+      default: () => new Date(currentYear + 10, 11, 31),
+      validator: isDate
+    },
+    formatter: {
+      type: Function,
+      default: null
+    },
+    threeDimensional: {
+      type: Boolean,
+      default: true
+    },
+    filter: Function
+  },
+  emits: ["click", "update:visible", "change", "confirm", "update:moduleValue"],
+  setup(props, { emit }) {
+    const state = reactive({
+      show: props.visible,
+      currentDate: new Date(),
+      title: props.title,
+      selectedValue: []
+    });
+    const formatValue = (value) => {
+      if (!isDate(value)) {
+        value = props.minDate;
+      }
+      let timestmp = Math.max(value.getTime(), props.minDate.getTime());
+      timestmp = Math.min(timestmp, props.maxDate.getTime());
+      return new Date(timestmp);
+    };
+    function getMonthEndDay(year, month) {
+      return 32 - new Date(year, month - 1, 32).getDate();
+    }
+    const getBoundary = (type, value) => {
+      const boundary = props[`${type}Date`];
+      const year = boundary.getFullYear();
+      let month = 1;
+      let day = 1;
+      let hour = 0;
+      let minute = 0;
+      if (type === "max") {
+        month = 12;
+        day = getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
+        hour = 23;
+        minute = 59;
+      }
+      const seconds = minute;
+      if (value.getFullYear() === year) {
+        month = boundary.getMonth() + 1;
+        if (value.getMonth() + 1 === month) {
+          day = boundary.getDate();
+          if (value.getDate() === day) {
+            hour = boundary.getHours();
+            if (value.getHours() === hour) {
+              minute = boundary.getMinutes();
+            }
+          }
+        }
+      } else {
+        return {
+          [`${type}Year`]: year,
+          [`${type}Month`]: month,
+          [`${type}Day`]: day,
+          [`${type}Hour`]: hour,
+          [`${type}Minute`]: minute,
+          [`${type}Seconds`]: seconds
+        };
+      }
+      return {
+        [`${type}Year`]: year,
+        [`${type}Month`]: month,
+        [`${type}Day`]: day,
+        [`${type}Hour`]: hour,
+        [`${type}Minute`]: minute,
+        [`${type}Seconds`]: seconds
+      };
+    };
+    const ranges = computed(() => {
+      const { maxYear, maxDay, maxMonth, maxHour, maxMinute, maxSeconds } = getBoundary("max", state.currentDate);
+      const { minYear, minDay, minMonth, minHour, minMinute, minSeconds } = getBoundary("min", state.currentDate);
+      let result = [
+        {
+          type: "year",
+          range: [minYear, maxYear]
+        },
+        {
+          type: "month",
+          range: [minMonth, maxMonth]
+        },
+        {
+          type: "day",
+          range: [minDay, maxDay]
+        },
+        {
+          type: "hour",
+          range: [minHour, maxHour]
+        },
+        {
+          type: "minute",
+          range: [minMinute, maxMinute]
+        },
+        {
+          type: "seconds",
+          range: [minSeconds, maxSeconds]
+        }
+      ];
+      switch (props.type) {
+        case "date":
+          result = result.slice(0, 3);
+          break;
+        case "datetime":
+          result = result.slice(0, 5);
+          break;
+        case "time":
+          result = result.slice(3, 6);
+          break;
+        case "year-month":
+          result = result.slice(0, 2);
+          break;
+        case "month-day":
+          result = result.slice(1, 3);
+          break;
+        case "datehour":
+          result = result.slice(0, 4);
+          break;
+      }
+      return result;
+    });
+    const columns = computed(() => {
+      const val = ranges.value.map((res, columnIndex) => {
+        return generateValue(res.range[0], res.range[1], getDateIndex(res.type), res.type, columnIndex);
+      });
+      return val;
+    });
+    const changeHandler = ({
+      columnIndex,
+      selectedValue,
+      selectedOptions
+    }) => {
+      if (["date", "datetime", "datehour", "month-day"].includes(props.type)) {
+        let formatDate = [];
+        selectedValue.forEach((item) => {
+          formatDate.push(item);
+        });
+        if (props.type == "month-day" && formatDate.length < 3) {
+          formatDate.unshift(new Date(props.modelValue || props.minDate || props.maxDate).getFullYear());
+        }
+        const year = Number(formatDate[0]);
+        const month = Number(formatDate[1]) - 1;
+        const day = Math.min(Number(formatDate[2]), getMonthEndDay(Number(formatDate[0]), Number(formatDate[1])));
+        let date = null;
+        if (props.type === "date" || props.type === "month-day") {
+          date = new Date(year, month, day);
+        } else if (props.type === "datetime") {
+          date = new Date(year, month, day, Number(formatDate[3]), Number(formatDate[4]));
+        } else if (props.type === "datehour") {
+          date = new Date(year, month, day, Number(formatDate[3]));
+        }
+        state.currentDate = formatValue(date);
+      }
+      emit("change", { columnIndex, selectedValue, selectedOptions });
+    };
+    const formatterOption = (type, value) => {
+      const { formatter, isShowChinese } = props;
+      let fOption = null;
+      if (formatter) {
+        fOption = formatter(type, { text: padZero(value, 2), value: padZero(value, 2) });
+      } else {
+        const padMin = padZero(value, 2);
+        const fatter = isShowChinese ? zhCNType[type] : "";
+        fOption = { text: padMin + fatter, value: padMin };
+      }
+      return fOption;
+    };
+    const generateValue = (min, max, val, type, columnIndex) => {
+      const arr = [];
+      let index2 = 0;
+      while (min <= max) {
+        arr.push(formatterOption(type, min));
+        if (type === "minute") {
+          min += props.minuteStep;
+        } else {
+          min++;
+        }
+        if (min <= val) {
+          index2++;
+        }
+      }
+      state.selectedValue[columnIndex] = arr[index2].value;
+      return props.filter ? props.filter(type, arr) : arr;
+    };
+    const getDateIndex = (type) => {
+      if (type === "year") {
+        return state.currentDate.getFullYear();
+      } else if (type === "month") {
+        return state.currentDate.getMonth() + 1;
+      } else if (type === "day") {
+        return state.currentDate.getDate();
+      } else if (type === "hour") {
+        return state.currentDate.getHours();
+      } else if (type === "minute") {
+        return state.currentDate.getMinutes();
+      } else if (type === "seconds") {
+        return state.currentDate.getSeconds();
+      }
+      return 0;
+    };
+    const closeHandler = () => {
+      emit("update:visible", false);
+    };
+    const confirm = (val) => {
+      emit("update:visible", false);
+      emit("confirm", val);
+    };
+    onBeforeMount(() => {
+      state.currentDate = formatValue(props.modelValue);
+    });
+    watch(() => props.modelValue, (value) => {
+      state.currentDate = formatValue(value);
+    });
+    watch(() => props.title, (val) => {
+      state.title = val;
+    });
+    watch(() => props.visible, (val) => {
+      state.show = val;
+    });
+    return {
+      ...toRefs(state),
+      changeHandler,
+      closeHandler,
+      confirm,
+      columns
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_picker = resolveComponent("nut-picker");
+  return openBlock(), createBlock(_component_nut_picker, {
+    modelValue: _ctx.selectedValue,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.selectedValue = $event),
+    visible: _ctx.show,
+    "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => _ctx.show = $event),
+    okText: _ctx.okText,
+    cancelText: _ctx.cancelText,
+    onClose: _ctx.closeHandler,
+    columns: _ctx.columns,
+    onChange: _ctx.changeHandler,
+    title: _ctx.title,
+    onConfirm: _ctx.confirm,
+    isWrapTeleport: _ctx.isWrapTeleport,
+    threeDimensional: _ctx.threeDimensional
+  }, {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+  }, 8, ["modelValue", "visible", "okText", "cancelText", "onClose", "columns", "onChange", "title", "onConfirm", "isWrapTeleport", "threeDimensional"]);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Dialog.js

@@ -0,0 +1,306 @@
+/*!
+* @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, onMounted, watch, computed, resolveComponent, openBlock, createBlock, normalizeStyle, withCtx, createElementVNode, normalizeClass, createElementBlock, renderSlot, Fragment, createTextVNode, toDisplayString, createCommentVNode, resolveDynamicComponent, createVNode, render, h } from "vue";
+import { a as isPromise, c as createComponent } from "./component.js";
+import Popup, { popupProps } from "./Popup.js";
+import Button from "./Button.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+import "./OverLay.js";
+import "./Icon.js";
+import "./pxCheck.js";
+const { componentName, create, translate } = createComponent("dialog");
+const _sfc_main = create({
+  inheritAttrs: false,
+  components: {
+    [Popup.name]: Popup,
+    [Button.name]: Button
+  },
+  props: {
+    ...popupProps,
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    content: {
+      type: [String, Object],
+      default: ""
+    },
+    noFooter: {
+      type: Boolean,
+      default: false
+    },
+    noOkBtn: {
+      type: Boolean,
+      default: false
+    },
+    noCancelBtn: {
+      type: Boolean,
+      default: false
+    },
+    cancelText: {
+      type: String,
+      default: ""
+    },
+    okText: {
+      type: String,
+      default: ""
+    },
+    cancelAutoClose: {
+      type: Boolean,
+      default: true
+    },
+    textAlign: {
+      type: String,
+      default: "center"
+    },
+    closeOnPopstate: {
+      type: Boolean,
+      default: false
+    },
+    footerDirection: {
+      type: String,
+      default: "horizontal"
+    },
+    customClass: {
+      type: String,
+      default: ""
+    },
+    popStyle: {
+      type: Object
+    },
+    beforeClose: {
+      type: Function
+    }
+  },
+  emits: ["update", "update:visible", "ok", "cancel", "opened", "closed"],
+  setup(props, { emit }) {
+    const showPopup = ref(props.visible);
+    onMounted(() => {
+      if (props.closeOnPopstate) {
+        window.addEventListener("popstate", function() {
+          closed("page");
+        });
+      }
+    });
+    watch(() => props.visible, (value) => {
+      showPopup.value = value;
+      if (value) {
+        emit("opened");
+      }
+    });
+    const classes = computed(() => {
+      return {
+        [componentName]: true,
+        [props.customClass]: true
+      };
+    });
+    const update = (val) => {
+      emit("update", val);
+      emit("update:visible", val);
+    };
+    const closed = (action) => {
+      if (props.beforeClose) {
+        const result = props.beforeClose(action);
+        if (isPromise(result)) {
+          result.then((bool) => {
+            if (bool) {
+              update(false);
+              emit("closed");
+            }
+          });
+        }
+      } else {
+        update(false);
+        emit("closed");
+      }
+    };
+    const onCancel = () => {
+      emit("cancel");
+      if (props.cancelAutoClose) {
+        closed("cancel");
+      }
+    };
+    const onOk = () => {
+      emit("ok");
+      closed("ok");
+    };
+    return {
+      closed,
+      classes,
+      onCancel,
+      onOk,
+      showPopup,
+      translate
+    };
+  }
+});
+const _hoisted_1 = {
+  key: 0,
+  class: "nut-dialog__header"
+};
+const _hoisted_2 = ["innerHTML"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_button = resolveComponent("nut-button");
+  const _component_nut_popup = resolveComponent("nut-popup");
+  return openBlock(), createBlock(_component_nut_popup, {
+    teleport: _ctx.teleport,
+    visible: _ctx.showPopup,
+    "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => _ctx.showPopup = $event),
+    "close-on-click-overlay": _ctx.closeOnClickOverlay,
+    "lock-scroll": _ctx.lockScroll,
+    "pop-class": _ctx.popClass,
+    style: normalizeStyle(_ctx.popStyle),
+    "overlay-class": _ctx.overlayClass,
+    "overlay-style": _ctx.overlayStyle,
+    round: "",
+    onClickOverlay: _ctx.closed,
+    onClickCloseIcon: _ctx.closed
+  }, {
+    default: withCtx(() => [
+      createElementVNode("view", {
+        class: normalizeClass(_ctx.classes)
+      }, [
+        _ctx.title ? (openBlock(), createElementBlock("view", _hoisted_1, [
+          _ctx.$slots.header ? renderSlot(_ctx.$slots, "header", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            createTextVNode(toDisplayString(_ctx.title), 1)
+          ], 64))
+        ])) : createCommentVNode("", true),
+        createElementVNode("view", {
+          class: "nut-dialog__content",
+          style: normalizeStyle({ textAlign: _ctx.textAlign })
+        }, [
+          _ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : typeof _ctx.content === "string" ? (openBlock(), createElementBlock("view", {
+            key: 1,
+            innerHTML: _ctx.content
+          }, null, 8, _hoisted_2)) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.content), { key: 2 }))
+        ], 4),
+        !_ctx.noFooter ? (openBlock(), createElementBlock("view", {
+          key: 1,
+          class: normalizeClass(["nut-dialog__footer", { [_ctx.footerDirection]: _ctx.footerDirection }])
+        }, [
+          _ctx.$slots.footer ? renderSlot(_ctx.$slots, "footer", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            !_ctx.noCancelBtn ? (openBlock(), createBlock(_component_nut_button, {
+              key: 0,
+              size: "small",
+              plain: "",
+              type: "primary",
+              class: "nut-dialog__footer-cancel",
+              onClick: _ctx.onCancel
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(_ctx.cancelText || _ctx.translate("cancel")), 1)
+              ]),
+              _: 1
+            }, 8, ["onClick"])) : createCommentVNode("", true),
+            !_ctx.noOkBtn ? (openBlock(), createBlock(_component_nut_button, {
+              key: 1,
+              size: "small",
+              type: "primary",
+              class: "nut-dialog__footer-ok",
+              onClick: _ctx.onOk
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(_ctx.okText || _ctx.translate("confirm")), 1)
+              ]),
+              _: 1
+            }, 8, ["onClick"])) : createCommentVNode("", true)
+          ], 64))
+        ], 2)) : createCommentVNode("", true)
+      ], 2)
+    ]),
+    _: 3
+  }, 8, ["teleport", "visible", "close-on-click-overlay", "lock-scroll", "pop-class", "style", "overlay-class", "overlay-style", "onClickOverlay", "onClickCloseIcon"]);
+}
+var Dialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+class DialogOptions {
+  constructor() {
+    this.title = "";
+    this.content = "";
+    this.cancelText = "";
+    this.okText = "";
+    this.textAlign = "center";
+    this.customClass = "";
+    this.overlayStyle = {};
+    this.overlayClass = "";
+    this.popStyle = {};
+    this.popClass = "";
+    this.teleport = "body";
+    this.id = new Date().getTime();
+    this.footerDirection = "horizontal";
+    this.onUpdate = (value) => {
+    };
+    this.onOk = () => {
+    };
+    this.onCancel = () => {
+    };
+    this.onOpened = () => {
+    };
+    this.onClosed = () => {
+    };
+    this.visible = true;
+    this.noFooter = false;
+    this.noOkBtn = false;
+    this.noCancelBtn = false;
+    this.okBtnDisabled = false;
+    this.closeOnPopstate = false;
+    this.lockScroll = false;
+  }
+}
+class DialogFunction {
+  constructor(_options) {
+    this.options = new DialogOptions();
+    this.close = () => {
+    };
+    this.setDefaultOptions = (options2) => {
+    };
+    this.resetDefaultOptions = () => {
+    };
+    let options = Object.assign(this.options, _options);
+    let elWarp = document.body;
+    let teleport = options.teleport;
+    if (teleport != "body") {
+      if (typeof teleport == "string") {
+        elWarp = document.querySelector(teleport);
+      } else {
+        elWarp = options.teleport;
+      }
+    }
+    const root = document.createElement("view");
+    root.id = "dialog-" + options.id;
+    const Wrapper = {
+      setup() {
+        options.onUpdate = (val) => {
+          if (val == false) {
+            elWarp.removeChild(root);
+          }
+        };
+        if (options == null ? void 0 : options.onOpened) {
+          options == null ? void 0 : options.onOpened();
+        }
+        options.teleport = `#${root.id}`;
+        return () => {
+          return h(Dialog, options);
+        };
+      }
+    };
+    this.instance = createVNode(Wrapper);
+    elWarp.appendChild(root);
+    render(this.instance, root);
+  }
+}
+const _Dialog = function(options) {
+  return new DialogFunction(options);
+};
+_Dialog.install = (app) => {
+  app.use(Dialog);
+  app.config.globalProperties.$dialog = _Dialog;
+};
+export { Dialog, DialogOptions, _Dialog as default };

package/dist/packages/_es/Divider.js

@@ -0,0 +1,70 @@
+/*!
+* @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 { computed, 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("divider");
+const _sfc_main = create({
+  props: {
+    contentPosition: {
+      type: String,
+      default: "center"
+    },
+    dashed: {
+      type: Boolean,
+      default: false
+    },
+    hairline: {
+      type: Boolean,
+      default: true
+    },
+    direction: {
+      type: String,
+      default: "horizontal"
+    }
+  },
+  components: {},
+  setup(props, context) {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      let defaultClassesObj = {
+        [prefixCls]: true
+      };
+      let classesObj = {};
+      if (props.direction === "horizontal") {
+        classesObj = {
+          ...defaultClassesObj,
+          [`${prefixCls}-center`]: context.slots.default,
+          [`${prefixCls}-left`]: props.contentPosition === "left",
+          [`${prefixCls}-right`]: props.contentPosition === "right",
+          [`${prefixCls}-dashed`]: props.dashed,
+          [`${prefixCls}-hairline`]: props.hairline
+        };
+      } else {
+        classesObj = {
+          ...defaultClassesObj,
+          [`${prefixCls}-vertical`]: props.direction === "vertical"
+        };
+      }
+      return classesObj;
+    });
+    return { classes };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.direction === "horizontal" ? (openBlock(), createElementBlock("view", {
+    key: 0,
+    class: normalizeClass(_ctx.classes)
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 2)) : (openBlock(), createElementBlock("view", {
+    key: 1,
+    class: normalizeClass(_ctx.classes)
+  }, null, 2));
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };