@nutui/nutui 3.1.21-beta.0 → 3.1.21-beta.3

package/dist/packages/_es/List.js

@@ -0,0 +1,128 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+/*!
+* @nutui/nutui v3.1.21-beta.3 Wed May 18 2022 18:19:57 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"],
+  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");
+      }
+      state.startOffset = scrollTop - scrollTop % props.height;
+    };
+    watch(() => props.listData, () => {
+      state.list = props.listData.slice();
+    });
+    return __spreadProps(__spreadValues({}, 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,120 @@
+/*!
+* @nutui/nutui v3.1.21-beta.3 Wed May 18 2022 18:19:57 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+import { ref, computed, reactive, provide, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, normalizeStyle, toDisplayString, createVNode, renderSlot } 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
+    },
+    duration: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+  setup(props, { emit, slots }) {
+    const barRef = ref();
+    const offset = ref(0);
+    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
+      };
+    });
+    const updateOffset = () => {
+      if (barRef.value) {
+        const rect = useRect(barRef);
+        offset.value = rect.bottom;
+      }
+    };
+    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 });
+        }
+      });
+    };
+    return {
+      toggleItem,
+      children,
+      opened,
+      classes,
+      barRef
+    };
+  }
+});
+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", { active: item.state.showPopup }])
+          }, [
+            createElementVNode("view", _hoisted_2, toDisplayString(item.renderTitle()), 1),
+            createVNode(_component_nut_icon, {
+              name: item.titleIcon,
+              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,169 @@
+/*!
+* @nutui/nutui v3.1.21-beta.3 Wed May 18 2022 18:19:57 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: {
+      type: String,
+      default: "down-arrow"
+    }
+  },
+  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 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,
+      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: "placeholder-element",
+      style: normalizeStyle({ height: _ctx.parent.offset.value + "px" })
+    }, null, 4), [
+      [vShow, _ctx.state.isShowPlaceholderElement]
+    ]),
+    createVNode(_component_nut_popup, mergeProps({
+      style: { top: _ctx.parent.offset.value + "px" },
+      overlayStyle: { top: _ctx.parent.offset.value + "px" }
+    }, _ctx.$attrs, {
+      visible: _ctx.state.showPopup,
+      "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => _ctx.state.showPopup = $event),
+      position: "top",
+      duration: _ctx.parent.props.duration,
+      "pop-class": "nut-menu__pop",
+      overlayClass: "nut-menu__overlay",
+      overlay: _ctx.parent.props.overlay,
+      onClosed: _ctx.handleClose,
+      isWrapTeleport: false
+    }), {
+      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: "Check",
+                color: _ctx.parent.props.activeColor
+              }, null, 8, ["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", "duration", "overlay", "onClosed"])
+  ], 2)), [
+    [vShow, _ctx.state.showWrapper]
+  ]);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Navbar.js

@@ -0,0 +1,100 @@
+/*!
+* @nutui/nutui v3.1.21-beta.3 Wed May 18 2022 18:19:57 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+import { toRefs, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, createCommentVNode, renderSlot, toDisplayString } 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("navbar");
+const _sfc_main = create({
+  props: {
+    leftShow: { type: Boolean, default: true },
+    title: { type: String, default: "" },
+    titIcon: { type: String, default: "" },
+    desc: { type: String, default: "" },
+    fixed: {
+      type: Boolean,
+      default: false
+    },
+    safeAreaInsetTop: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["on-click-back", "on-click-title", "on-click-icon", "on-click-right"],
+  setup(props, { emit }) {
+    const { fixed, safeAreaInsetTop } = toRefs(props);
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}--fixed`]: fixed.value,
+        [`${prefixCls}--safe-area-inset-top`]: safeAreaInsetTop.value
+      };
+    });
+    function handleLeft() {
+      emit("on-click-back");
+    }
+    function handleCenter() {
+      emit("on-click-title");
+    }
+    function handleCenterIcon() {
+      emit("on-click-icon");
+    }
+    function handleRight() {
+      emit("on-click-right");
+    }
+    return {
+      classes,
+      handleLeft,
+      handleCenter,
+      handleCenterIcon,
+      handleRight
+    };
+  }
+});
+const _hoisted_1 = { class: "nut-navbar__left" };
+const _hoisted_2 = { class: "nut-navbar__title" };
+const _hoisted_3 = { class: "nut-navbar__right" };
+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", _hoisted_1, [
+      _ctx.leftShow ? (openBlock(), createBlock(_component_nut_icon, {
+        key: 0,
+        color: "#979797",
+        name: "left",
+        onClick: _ctx.handleLeft
+      }, null, 8, ["onClick"])) : createCommentVNode("", true),
+      renderSlot(_ctx.$slots, "left")
+    ]),
+    createElementVNode("view", _hoisted_2, [
+      _ctx.title ? (openBlock(), createElementBlock("view", {
+        key: 0,
+        class: "title",
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleCenter && _ctx.handleCenter(...args))
+      }, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
+      _ctx.titIcon ? (openBlock(), createBlock(_component_nut_icon, {
+        key: 1,
+        class: "icon",
+        name: _ctx.titIcon,
+        onClick: _ctx.handleCenterIcon
+      }, null, 8, ["name", "onClick"])) : createCommentVNode("", true),
+      renderSlot(_ctx.$slots, "content")
+    ]),
+    createElementVNode("view", _hoisted_3, [
+      _ctx.desc ? (openBlock(), createElementBlock("view", {
+        key: 0,
+        class: "right_text",
+        onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleRight && _ctx.handleRight(...args))
+      }, toDisplayString(_ctx.desc), 1)) : createCommentVNode("", true),
+      renderSlot(_ctx.$slots, "right")
+    ])
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };