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

package/dist/packages/_es/InputNumber.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 { computed, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createVNode, createElementVNode } from "vue";
+import { c as createComponent } from "./component.js";
+import { p as pxCheck } from "./pxCheck.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+const { componentName, create } = createComponent("inputnumber");
+const _sfc_main = create({
+  props: {
+    modelValue: {
+      type: [Number, String],
+      default: 0
+    },
+    inputWidth: {
+      type: [Number, String],
+      default: ""
+    },
+    buttonSize: {
+      type: [Number, String],
+      default: ""
+    },
+    min: {
+      type: [Number, String],
+      default: 1
+    },
+    max: {
+      type: [Number, String],
+      default: 9999
+    },
+    step: {
+      type: [Number, String],
+      default: 1
+    },
+    decimalPlaces: {
+      type: [Number, String],
+      default: 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue", "change", "blur", "focus", "reduce", "add", "overlimit"],
+  setup(props, { emit }) {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}--disabled`]: props.disabled
+      };
+    });
+    const fixedDecimalPlaces = (v) => {
+      return Number(v).toFixed(Number(props.decimalPlaces));
+    };
+    const change = (event) => {
+      const input = event.target;
+      emit("update:modelValue", input.valueAsNumber, event);
+    };
+    const emitChange = (value, event) => {
+      let output_value = fixedDecimalPlaces(value);
+      emit("update:modelValue", output_value, event);
+      emit("change", output_value, event);
+    };
+    const addAllow = (value = Number(props.modelValue)) => {
+      return value < Number(props.max) && !props.disabled;
+    };
+    const reduceAllow = (value = Number(props.modelValue)) => {
+      return value > Number(props.min) && !props.disabled;
+    };
+    const reduce = (event) => {
+      emit("reduce", event);
+      if (reduceAllow()) {
+        let output_value = Number(props.modelValue) - Number(props.step);
+        emitChange(output_value, event);
+      } else {
+        emit("overlimit", event, "reduce");
+      }
+    };
+    const add = (event) => {
+      emit("add", event);
+      if (addAllow()) {
+        let output_value = Number(props.modelValue) + Number(props.step);
+        emitChange(output_value, event);
+      } else {
+        emit("overlimit", event, "add");
+      }
+    };
+    const focus = (event) => {
+      if (props.disabled)
+        return;
+      if (props.readonly)
+        return;
+      emit("focus", event);
+    };
+    const blur = (event) => {
+      if (props.disabled)
+        return;
+      if (props.readonly)
+        return;
+      const input = event.target;
+      let value = input.valueAsNumber;
+      if (value < Number(props.min)) {
+        value = Number(props.min);
+      } else if (value > Number(props.max)) {
+        value = Number(props.max);
+      }
+      emitChange(value, event);
+      emit("blur", event);
+    };
+    return {
+      classes,
+      change,
+      blur,
+      focus,
+      add,
+      addAllow,
+      reduce,
+      reduceAllow,
+      pxCheck
+    };
+  }
+});
+const _hoisted_1 = ["min", "max", "disabled", "readonly", "value"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    style: normalizeStyle({ height: _ctx.pxCheck(_ctx.buttonSize) })
+  }, [
+    createVNode(_component_nut_icon, {
+      name: "minus",
+      class: normalizeClass(["nut-inputnumber__icon", { "nut-inputnumber__icon--disabled": !_ctx.reduceAllow() }]),
+      size: _ctx.buttonSize,
+      onClick: _ctx.reduce
+    }, null, 8, ["class", "size", "onClick"]),
+    createElementVNode("input", {
+      type: "number",
+      min: _ctx.min,
+      max: _ctx.max,
+      style: normalizeStyle({ width: _ctx.pxCheck(_ctx.inputWidth) }),
+      disabled: _ctx.disabled,
+      readonly: _ctx.readonly,
+      value: _ctx.modelValue,
+      onInput: _cache[0] || (_cache[0] = (...args) => _ctx.change && _ctx.change(...args)),
+      onBlur: _cache[1] || (_cache[1] = (...args) => _ctx.blur && _ctx.blur(...args)),
+      onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.focus && _ctx.focus(...args))
+    }, null, 44, _hoisted_1),
+    createVNode(_component_nut_icon, {
+      name: "plus",
+      class: normalizeClass(["nut-inputnumber__icon", { "nut-inputnumber__icon--disabled": !_ctx.addAllow() }]),
+      size: _ctx.buttonSize,
+      onClick: _ctx.add
+    }, null, 8, ["class", "size", "onClick"])
+  ], 6);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Layout.js

@@ -0,0 +1,11 @@
+/*!
+* @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 "vue";
+import "../locale/lang";
+const { create } = createComponent("layout");
+const _sfc_main = create({});
+export { _sfc_main as default };

package/dist/packages/_es/List.js

@@ -0,0 +1,111 @@
+/*!
+* @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, toRefs, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, Fragment, renderList, 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("list");
+const _sfc_main = create({
+  props: {
+    height: {
+      type: [Number],
+      default: 50
+    },
+    listData: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    containerHeight: {
+      type: [Number],
+      default: document.documentElement.clientHeight || document.body.clientHeight || 667
+    }
+  },
+  emits: ["scroll", "scroll-bottom"],
+  setup(props, { emit }) {
+    const list = ref(null);
+    const state = reactive({
+      startOffset: 0,
+      start: 0,
+      list: props.listData.slice()
+    });
+    const visibleCount = computed(() => {
+      return Math.ceil(props.containerHeight / props.height);
+    });
+    const end = computed(() => {
+      return state.start + visibleCount.value;
+    });
+    const getTransform = computed(() => {
+      return `translate3d(0, ${state.startOffset}px, 0)`;
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const listHeight = computed(() => {
+      return state.list.length * props.height;
+    });
+    const visibleData = computed(() => {
+      return state.list.slice(state.start, Math.min(end.value, state.list.length));
+    });
+    const handleScrollEvent = () => {
+      var _a;
+      const scrollTop = (_a = list.value) == null ? void 0 : _a.scrollTop;
+      state.start = Math.floor(scrollTop / props.height);
+      if (end.value > state.list.length) {
+        emit("scroll");
+        emit("scroll-bottom");
+      }
+      state.startOffset = scrollTop - scrollTop % props.height;
+    };
+    watch(() => props.listData, () => {
+      state.list = props.listData.slice();
+    });
+    return {
+      ...toRefs(state),
+      list,
+      getTransform,
+      listHeight,
+      visibleData,
+      classes,
+      handleScrollEvent
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    onScrollPassive: _cache[0] || (_cache[0] = (...args) => _ctx.handleScrollEvent && _ctx.handleScrollEvent(...args)),
+    ref: "list"
+  }, [
+    createElementVNode("div", {
+      class: "nut-list-phantom",
+      style: normalizeStyle({ height: _ctx.listHeight + "px" })
+    }, null, 4),
+    createElementVNode("div", {
+      class: "nut-list-container",
+      style: normalizeStyle({ transform: _ctx.getTransform })
+    }, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.visibleData, (item, index2) => {
+        return openBlock(), createElementBlock("div", {
+          class: "nut-list-item",
+          style: normalizeStyle({ height: _ctx.height + "px" }),
+          key: item
+        }, [
+          renderSlot(_ctx.$slots, "default", {
+            item,
+            index: index2
+          })
+        ], 4);
+      }), 128))
+    ], 4)
+  ], 34);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Menu.js

@@ -0,0 +1,175 @@
+/*!
+* @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, onMounted, onUnmounted, reactive, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, normalizeStyle, toDisplayString, createVNode, renderSlot, provide } from "vue";
+import { c as createComponent } from "./component.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("menu");
+const _sfc_main = create({
+  props: {
+    activeColor: {
+      type: String,
+      default: ""
+    },
+    overlay: {
+      type: Boolean,
+      default: true
+    },
+    lockScroll: {
+      type: Boolean,
+      default: true
+    },
+    duration: {
+      type: [Number, String],
+      default: 0
+    },
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: true
+    },
+    direction: {
+      type: String,
+      default: "down"
+    },
+    scrollFixed: {
+      type: [Boolean, String, Number],
+      default: false
+    },
+    titleClass: [String]
+  },
+  setup(props, { emit, slots }) {
+    const barRef = ref();
+    const offset = ref(0);
+    const isScrollFixed = ref(false);
+    const useChildren = () => {
+      const publicChildren = reactive([]);
+      const internalChildren = reactive([]);
+      const linkChildren2 = (value) => {
+        const link = (child) => {
+          if (child.proxy) {
+            internalChildren.push(child);
+            publicChildren.push(child.proxy);
+          }
+        };
+        provide("menuParent", Object.assign({
+          link,
+          children: publicChildren,
+          internalChildren
+        }, value));
+      };
+      return {
+        children: publicChildren,
+        linkChildren: linkChildren2
+      };
+    };
+    const { children, linkChildren } = useChildren();
+    const opened = computed(() => children.some((item) => item.state.showWrapper));
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        "scroll-fixed": isScrollFixed.value
+      };
+    });
+    const updateOffset = () => {
+      if (barRef.value) {
+        const rect = useRect(barRef);
+        if (props.direction === "down") {
+          offset.value = rect.bottom;
+        } else {
+          offset.value = window.innerHeight - rect.top;
+        }
+      }
+    };
+    linkChildren({ props, offset });
+    const toggleItem = (active) => {
+      children.forEach((item, index2) => {
+        if (index2 === active) {
+          updateOffset();
+          item.toggle();
+        } else if (item.state.showPopup) {
+          item.toggle(false, { immediate: true });
+        }
+      });
+    };
+    const getScrollTop = (el) => {
+      return Math.max(0, "scrollTop" in el ? el.scrollTop : el.pageYOffset);
+    };
+    const onScroll = () => {
+      const { scrollFixed } = props;
+      const scrollTop = getScrollTop(window);
+      isScrollFixed.value = scrollTop > (typeof scrollFixed === "boolean" ? 30 : Number(scrollFixed));
+    };
+    const getClasses = (showPopup) => {
+      let str = "";
+      const { titleClass } = props;
+      if (showPopup) {
+        str += "active";
+      }
+      if (titleClass) {
+        str += ` ${titleClass}`;
+      }
+      return str;
+    };
+    onMounted(() => {
+      const { scrollFixed } = props;
+      if (scrollFixed) {
+        window.addEventListener("scroll", onScroll);
+      }
+    });
+    onUnmounted(() => {
+      const { scrollFixed } = props;
+      if (scrollFixed) {
+        window.removeEventListener("scroll", onScroll);
+      }
+    });
+    return {
+      toggleItem,
+      children,
+      opened,
+      classes,
+      barRef,
+      getClasses
+    };
+  }
+});
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = { class: "nut-menu__title-text" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes)
+  }, [
+    createElementVNode("view", {
+      class: normalizeClass(["nut-menu__bar", { opened: _ctx.opened }]),
+      ref: "barRef"
+    }, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.children, (item, index2) => {
+        return openBlock(), createElementBlock("view", {
+          key: index2,
+          class: normalizeClass(["nut-menu__item", { disabled: item.disabled, active: item.state.showPopup }]),
+          onClick: ($event) => !item.disabled && _ctx.toggleItem(index2),
+          style: normalizeStyle({ color: item.state.showPopup ? _ctx.activeColor : "" })
+        }, [
+          createElementVNode("view", {
+            class: normalizeClass(["nut-menu__title", _ctx.getClasses(item.state.showPopup)])
+          }, [
+            createElementVNode("view", _hoisted_2, toDisplayString(item.renderTitle()), 1),
+            createVNode(_component_nut_icon, {
+              name: item.titleIcon || (_ctx.direction === "up" ? "arrow-up" : "down-arrow"),
+              size: "10",
+              class: "nut-menu__title-icon"
+            }, null, 8, ["name"])
+          ], 2)
+        ], 14, _hoisted_1);
+      }), 128))
+    ], 2),
+    renderSlot(_ctx.$slots, "default")
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/MenuItem.js

@@ -0,0 +1,181 @@
+/*!
+* @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, inject, getCurrentInstance, resolveComponent, withDirectives, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, vShow, createVNode, mergeProps, withCtx, Fragment, renderList, createBlock, createCommentVNode, toDisplayString, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import _sfc_main$1 from "./Icon.js";
+import Popup from "./Popup.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+import "./pxCheck.js";
+import "./OverLay.js";
+const { componentName, create } = createComponent("menu-item");
+const _sfc_main = create({
+  props: {
+    title: String,
+    options: {
+      type: Array,
+      default: []
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    modelValue: null,
+    cols: {
+      type: Number,
+      default: 1
+    },
+    titleIcon: String,
+    optionIcon: {
+      type: String,
+      default: "Check"
+    }
+  },
+  components: {
+    [_sfc_main$1.name]: _sfc_main$1,
+    [Popup.name]: Popup
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, slots }) {
+    const state = reactive({
+      showPopup: false,
+      transition: true,
+      showWrapper: false,
+      isShowPlaceholderElement: false
+    });
+    const useParent = () => {
+      const parent2 = inject("menuParent", null);
+      if (parent2) {
+        const instance = getCurrentInstance();
+        const { link } = parent2;
+        link(instance);
+        return {
+          parent: parent2
+        };
+      }
+    };
+    const { parent } = useParent();
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const placeholderElementStyle = computed(() => {
+      const heightStyle = { height: parent.offset.value + "px" };
+      if (parent.props.direction === "down") {
+        return heightStyle;
+      } else {
+        return { ...heightStyle, top: "auto" };
+      }
+    });
+    const toggle = (show = !state.showPopup, options = {}) => {
+      if (show === state.showPopup) {
+        return;
+      }
+      state.showPopup = show;
+      state.isShowPlaceholderElement = show;
+      if (show) {
+        state.showWrapper = true;
+      }
+    };
+    const renderTitle = () => {
+      var _a;
+      if (props.title) {
+        return props.title;
+      }
+      const match = (_a = props.options) == null ? void 0 : _a.find((option) => option.value === props.modelValue);
+      return match ? match.text : "";
+    };
+    const onClick = (option) => {
+      state.showPopup = false;
+      state.isShowPlaceholderElement = false;
+      if (option.value !== props.modelValue) {
+        emit("update:modelValue", option.value);
+        emit("change", option.value);
+      }
+    };
+    const handleClose = () => {
+      state.showWrapper = false;
+      state.isShowPlaceholderElement = false;
+    };
+    const handleClickOutside = () => {
+      state.showPopup = false;
+    };
+    return {
+      classes,
+      placeholderElementStyle,
+      renderTitle,
+      state,
+      parent,
+      toggle,
+      onClick,
+      handleClose,
+      handleClickOutside
+    };
+  }
+});
+const _hoisted_1 = { class: "nut-menu-item__content" };
+const _hoisted_2 = ["onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  const _component_nut_popup = resolveComponent("nut-popup");
+  return withDirectives((openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes)
+  }, [
+    withDirectives(createElementVNode("div", {
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClickOutside && _ctx.handleClickOutside(...args)),
+      class: normalizeClass(["placeholder-element", { up: _ctx.parent.props.direction === "up" }]),
+      style: normalizeStyle(_ctx.placeholderElementStyle)
+    }, null, 6), [
+      [vShow, _ctx.state.isShowPlaceholderElement]
+    ]),
+    createVNode(_component_nut_popup, mergeProps({
+      style: _ctx.parent.props.direction === "down" ? { top: _ctx.parent.offset.value + "px" } : { bottom: _ctx.parent.offset.value + "px" },
+      overlayStyle: _ctx.parent.props.direction === "down" ? { top: _ctx.parent.offset.value + "px" } : { bottom: _ctx.parent.offset.value + "px" }
+    }, _ctx.$attrs, {
+      visible: _ctx.state.showPopup,
+      "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => _ctx.state.showPopup = $event),
+      position: _ctx.parent.props.direction === "down" ? "top" : "bottom",
+      duration: _ctx.parent.props.duration,
+      "pop-class": "nut-menu__pop",
+      overlayClass: "nut-menu__overlay",
+      overlay: _ctx.parent.props.overlay,
+      onClosed: _ctx.handleClose,
+      lockScroll: _ctx.parent.props.lockScroll,
+      isWrapTeleport: false,
+      "close-on-click-overlay": _ctx.parent.props.closeOnClickOverlay
+    }), {
+      default: withCtx(() => [
+        createElementVNode("view", _hoisted_1, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option, index2) => {
+            return openBlock(), createElementBlock("view", {
+              key: index2,
+              class: normalizeClass(["nut-menu-item__option", { active: option.value === _ctx.modelValue }]),
+              style: normalizeStyle({ "flex-basis": 100 / _ctx.cols + "%" }),
+              onClick: ($event) => _ctx.onClick(option)
+            }, [
+              option.value === _ctx.modelValue ? (openBlock(), createBlock(_component_nut_icon, {
+                key: 0,
+                name: _ctx.optionIcon,
+                color: _ctx.parent.props.activeColor
+              }, null, 8, ["name", "color"])) : createCommentVNode("", true),
+              createElementVNode("view", {
+                style: normalizeStyle({ color: option.value === _ctx.modelValue ? _ctx.parent.props.activeColor : "" })
+              }, toDisplayString(option.text), 5)
+            ], 14, _hoisted_2);
+          }), 128)),
+          renderSlot(_ctx.$slots, "default")
+        ])
+      ]),
+      _: 3
+    }, 16, ["style", "overlayStyle", "visible", "position", "duration", "overlay", "onClosed", "lockScroll", "close-on-click-overlay"])
+  ], 2)), [
+    [vShow, _ctx.state.showWrapper]
+  ]);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };