@nutui/nutui 4.0.12-beta.1 → 4.0.12

package/dist/packages/_es/Menu.js

@@ -1,13 +1,14 @@
-import { ref as v, computed as y, onMounted as N, onUnmounted as P, reactive as _, provide as T, resolveComponent as k, openBlock as i, createElementBlock as g, normalizeClass as u, createElementVNode as p, Fragment as D, renderList as I, normalizeStyle as U, toDisplayString as R, renderSlot as b, createBlock as x } from "vue";
-import { c as z } from "./component-234624bc.js";
-import { u as M } from "./index-192a3ef6.js";
-import { ArrowUp2 as j, ArrowDown2 as H } from "@nutui/icons-vue";
-import { _ as V } from "./_plugin-vue_export-helper-dad06003.js";
+import { ref, computed, onMounted, onUnmounted, reactive, provide, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, normalizeStyle, toDisplayString, renderSlot, createBlock } from "vue";
+import { c as createComponent } from "./component-81a4c1d0.js";
+import { u as useRect } from "./index-29892cda.js";
+import { ArrowUp2, ArrowDown2 } from "@nutui/icons-vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
-const { componentName: W, create: Y } = z("menu"), q = Y({
+const { componentName, create } = createComponent("menu");
+const _sfc_main = create({
   components: {
-    ArrowUp2: j,
-    ArrowDown2: H
+    ArrowUp2,
+    ArrowDown2
   },
   props: {
     activeColor: {
@@ -16,11 +17,11 @@ const { componentName: W, create: Y } = z("menu"), q = Y({
     },
     overlay: {
       type: Boolean,
-      default: !0
+      default: true
     },
     lockScroll: {
       type: Boolean,
-      default: !0
+      default: true
     },
     duration: {
       type: [Number, String],
@@ -28,7 +29,7 @@ const { componentName: W, create: Y } = z("menu"), q = Y({
     },
     closeOnClickOverlay: {
       type: Boolean,
-      default: !0
+      default: true
     },
     direction: {
       type: String,
@@ -36,108 +37,162 @@ const { componentName: W, create: Y } = z("menu"), q = Y({
     },
     scrollFixed: {
       type: [Boolean, String, Number],
-      default: !1
+      default: false
     },
     titleClass: [String]
   },
-  setup(o, { emit: S, slots: $ }) {
-    const c = v(), a = v(0), f = v(!1), m = () => {
-      const e = _([]), t = _([]);
+  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);
+          }
+        };
+        const removeLink = (child) => {
+          if (child.proxy) {
+            let internalIndex = internalChildren.indexOf(child);
+            if (internalIndex > -1) {
+              internalChildren.splice(internalIndex, 1);
+            }
+            let publicIndex = publicChildren.indexOf(child.proxy);
+            if (internalIndex > -1) {
+              publicChildren.splice(publicIndex, 1);
+            }
+          }
+        };
+        provide(
+          "menuParent",
+          Object.assign(
+            {
+              removeLink,
+              link,
+              children: publicChildren,
+              internalChildren
+            },
+            value
+          )
+        );
+      };
       return {
-        children: e,
-        linkChildren: (E) => {
-          T(
-            "menuParent",
-            Object.assign(
-              {
-                removeLink: (r) => {
-                  if (r.proxy) {
-                    let w = t.indexOf(r);
-                    w > -1 && t.splice(w, 1);
-                    let L = e.indexOf(r.proxy);
-                    w > -1 && e.splice(L, 1);
-                  }
-                },
-                link: (r) => {
-                  r.proxy && (t.push(r), e.push(r.proxy));
-                },
-                children: e,
-                internalChildren: t
-              },
-              E
-            )
-          );
-        }
+        children: publicChildren,
+        linkChildren: linkChildren2
       };
-    }, { children: s, linkChildren: n } = m(), d = y(() => s.some((e) => e.state.showWrapper)), h = y(() => ({
-      [W]: !0,
-      "scroll-fixed": f.value
-    })), B = () => {
-      if (c.value) {
-        const e = M(c);
-        o.direction === "down" ? a.value = e.bottom : a.value = window.innerHeight - e.top;
+    };
+    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;
+        }
       }
     };
-    n({ props: o, offset: a });
-    const O = (e) => {
-      s.forEach((t, l) => {
-        l === e ? (B(), t.toggle()) : t.state.showPopup && t.toggle(!1, { immediate: !0 });
+    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 });
+        }
       });
-    }, A = (e) => Math.max(0, "scrollTop" in e ? e.scrollTop : e.pageYOffset), C = () => {
-      const { scrollFixed: e } = o, t = A(window);
-      f.value = t > (typeof e == "boolean" ? 30 : Number(e));
-    }, F = (e) => {
-      let t = "";
-      const { titleClass: l } = o;
-      return e && (t += "active"), l && (t += ` ${l}`), t;
     };
-    return N(() => {
-      const { scrollFixed: e } = o;
-      e && window.addEventListener("scroll", C);
-    }), P(() => {
-      const { scrollFixed: e } = o;
-      e && window.removeEventListener("scroll", C);
-    }), {
-      toggleItem: O,
-      children: s,
-      opened: d,
-      classes: h,
-      barRef: c,
-      getClasses: F
+    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
     };
   }
-}), G = ["onClick"], J = { class: "nut-menu__title-text" }, K = { class: "nut-menu__title-icon" };
-function Q(o, S, $, c, a, f) {
-  const m = k("ArrowUp2"), s = k("ArrowDown2");
-  return i(), g("view", {
-    class: u(o.classes)
+});
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = { class: "nut-menu__title-text" };
+const _hoisted_3 = { class: "nut-menu__title-icon" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ArrowUp2 = resolveComponent("ArrowUp2");
+  const _component_ArrowDown2 = resolveComponent("ArrowDown2");
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes)
   }, [
-    p("view", {
-      class: u(["nut-menu__bar", { opened: o.opened }]),
+    createElementVNode("view", {
+      class: normalizeClass(["nut-menu__bar", { opened: _ctx.opened }]),
       ref: "barRef"
     }, [
-      (i(!0), g(D, null, I(o.children, (n, d) => (i(), g("view", {
-        key: d,
-        class: u(["nut-menu__item", { disabled: n.disabled, active: n.state.showPopup }]),
-        onClick: (h) => !n.disabled && o.toggleItem(d),
-        style: U({ color: n.state.showPopup ? o.activeColor : "" })
-      }, [
-        p("view", {
-          class: u(["nut-menu__title", o.getClasses(n.state.showPopup)])
+      (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 : "" })
         }, [
-          p("view", J, R(n.renderTitle()), 1),
-          p("span", K, [
-            b(o.$slots, "icon", {}, () => [
-              o.direction === "up" ? (i(), x(m, { key: 0 })) : (i(), x(s, { key: 1 }))
+          createElementVNode("view", {
+            class: normalizeClass(["nut-menu__title", _ctx.getClasses(item.state.showPopup)])
+          }, [
+            createElementVNode("view", _hoisted_2, toDisplayString(item.renderTitle()), 1),
+            createElementVNode("span", _hoisted_3, [
+              renderSlot(_ctx.$slots, "icon", {}, () => [
+                _ctx.direction === "up" ? (openBlock(), createBlock(_component_ArrowUp2, { key: 0 })) : (openBlock(), createBlock(_component_ArrowDown2, { key: 1 }))
+              ])
             ])
-          ])
-        ], 2)
-      ], 14, G))), 128))
+          ], 2)
+        ], 14, _hoisted_1);
+      }), 128))
     ], 2),
-    b(o.$slots, "default")
+    renderSlot(_ctx.$slots, "default")
   ], 2);
 }
-const le = /* @__PURE__ */ V(q, [["render", Q]]);
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  le as default
+  index as default
 };

package/dist/packages/_es/MenuItem.js

@@ -1,23 +1,31 @@
-var B = Object.defineProperty, D = Object.defineProperties;
-var z = Object.getOwnPropertyDescriptors;
-var w = Object.getOwnPropertySymbols;
-var L = Object.prototype.hasOwnProperty, U = Object.prototype.propertyIsEnumerable;
-var g = (e, o, t) => o in e ? B(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t, d = (e, o) => {
-  for (var t in o || (o = {}))
-    L.call(o, t) && g(e, t, o[t]);
-  if (w)
-    for (var t of w(o))
-      U.call(o, t) && g(e, t, o[t]);
-  return e;
-}, m = (e, o) => D(e, z(o));
-import { reactive as j, computed as P, inject as A, getCurrentInstance as F, onUnmounted as I, resolveComponent as S, withDirectives as V, openBlock as r, createElementBlock as i, normalizeStyle as p, createElementVNode as v, vShow as b, createVNode as $, mergeProps as T, withCtx as q, Fragment as G, renderList as H, normalizeClass as f, renderSlot as O, createCommentVNode as J, toDisplayString as K } from "vue";
-import { c as M } from "./component-234624bc.js";
-import { P as E } from "./index-360c5092.js";
-import { Check as Q } from "@nutui/icons-vue";
-import { _ as R } from "./_plugin-vue_export-helper-dad06003.js";
+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));
+import { reactive, computed, inject, getCurrentInstance, onUnmounted, resolveComponent, withDirectives, openBlock, createElementBlock, normalizeStyle, createElementVNode, vShow, createVNode, mergeProps, withCtx, Fragment, renderList, normalizeClass, renderSlot, createCommentVNode, toDisplayString } from "vue";
+import { c as createComponent } from "./component-81a4c1d0.js";
+import { P as Popup } from "./index-da0a7662.js";
+import { Check } from "@nutui/icons-vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
 import "./Overlay.js";
-const { create: X } = M("menu-item"), Y = X({
+const { create } = createComponent("menu-item");
+const _sfc_main = create({
   props: {
     title: String,
     options: {
@@ -26,7 +34,7 @@ const { create: X } = M("menu-item"), Y = X({
     },
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     },
     modelValue: null,
     cols: {
@@ -37,118 +45,155 @@ const { create: X } = M("menu-item"), Y = X({
     inactiveTitleClass: String
   },
   components: {
-    [E.name]: E,
-    Check: Q
+    [Popup.name]: Popup,
+    Check
   },
   emits: ["update:modelValue", "change", "open", "close"],
-  setup(e, { emit: o }) {
-    const t = j({
-      showPopup: !1,
-      showWrapper: !1
-    }), h = () => {
-      const l = A("menuParent", null);
-      if (l) {
-        const a = F(), { link: c, removeLink: W } = l;
-        return c(a), I(() => {
-          W(a);
-        }), { parent: l };
+  setup(props, { emit }) {
+    const state = reactive({
+      showPopup: false,
+      showWrapper: false
+    });
+    const useParent = () => {
+      const parent2 = inject("menuParent", null);
+      if (parent2) {
+        const instance = getCurrentInstance();
+        const { link, removeLink } = parent2;
+        link(instance);
+        onUnmounted(() => {
+          removeLink(instance);
+        });
+        return { parent: parent2 };
       }
-    }, { parent: s } = h(), C = P(() => s.props.direction === "down" ? {
-      top: s.offset.value + "px"
-    } : {
-      bottom: s.offset.value + "px"
-    }), u = P(() => {
-      const l = { height: s.offset.value + "px" };
-      return s.props.direction === "down" ? m(d({}, l), { top: "0px" }) : m(d({}, l), { bottom: "0px" });
+    };
+    const { parent } = useParent();
+    const style = computed(() => {
+      return parent.props.direction === "down" ? {
+        top: parent.offset.value + "px"
+      } : {
+        bottom: parent.offset.value + "px"
+      };
     });
-    return {
-      style: C,
-      placeholderElementStyle: u,
-      renderTitle: () => {
-        var a;
-        if (e.title)
-          return e.title;
-        const l = (a = e.options) == null ? void 0 : a.find((c) => c.value === e.modelValue);
-        return l ? l.text : "";
-      },
-      state: t,
-      parent: s,
-      toggle: (l = !t.showPopup) => {
-        l !== t.showPopup && (t.showPopup = l, l && (t.showWrapper = !0, o("open")));
-      },
-      onClick: (l) => {
-        t.showPopup = !1, l.value !== e.modelValue && (o("update:modelValue", l.value), o("change", l.value));
-      },
-      handleClose: () => {
-        o("close"), t.showWrapper = !1;
-      },
-      handleClickOutside: () => {
-        t.showPopup = !1, o("close");
+    const placeholderElementStyle = computed(() => {
+      const heightStyle = { height: parent.offset.value + "px" };
+      if (parent.props.direction === "down") {
+        return __spreadProps(__spreadValues({}, heightStyle), { top: "0px" });
+      } else {
+        return __spreadProps(__spreadValues({}, heightStyle), { bottom: "0px" });
       }
+    });
+    const toggle = (show = !state.showPopup) => {
+      if (show === state.showPopup) {
+        return;
+      }
+      state.showPopup = show;
+      if (show) {
+        state.showWrapper = true;
+        emit("open");
+      }
+    };
+    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;
+      if (option.value !== props.modelValue) {
+        emit("update:modelValue", option.value);
+        emit("change", option.value);
+      }
+    };
+    const handleClose = () => {
+      emit("close");
+      state.showWrapper = false;
+    };
+    const handleClickOutside = () => {
+      state.showPopup = false;
+      emit("close");
+    };
+    return {
+      style,
+      placeholderElementStyle,
+      renderTitle,
+      state,
+      parent,
+      toggle,
+      onClick,
+      handleClose,
+      handleClickOutside
     };
   }
-}), Z = { class: "nut-menu-item__content nut-menu-item__overflow" }, _ = ["onClick"];
-function x(e, o, t, h, s, C) {
-  const u = S("Check"), y = S("nut-popup");
-  return V((r(), i("view", {
+});
+const _hoisted_1 = { class: "nut-menu-item__content nut-menu-item__overflow" };
+const _hoisted_2 = ["onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Check = resolveComponent("Check");
+  const _component_nut_popup = resolveComponent("nut-popup");
+  return withDirectives((openBlock(), createElementBlock("view", {
     class: "nut-menu-item",
-    style: p(e.style)
+    style: normalizeStyle(_ctx.style)
   }, [
-    V(v("div", {
-      onClick: o[0] || (o[0] = (...n) => e.handleClickOutside && e.handleClickOutside(...n)),
+    withDirectives(createElementVNode("div", {
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClickOutside && _ctx.handleClickOutside(...args)),
       class: "nut-menu-item-placeholder-element",
-      style: p(e.placeholderElementStyle)
+      style: normalizeStyle(_ctx.placeholderElementStyle)
     }, null, 4), [
-      [b, e.state.showPopup]
+      [vShow, _ctx.state.showPopup]
     ]),
-    $(y, T({
+    createVNode(_component_nut_popup, mergeProps({
       style: { position: "absolute" },
       overlayStyle: { position: "absolute" }
-    }, e.$attrs, {
-      visible: e.state.showPopup,
-      "onUpdate:visible": o[1] || (o[1] = (n) => e.state.showPopup = n),
-      position: e.parent.props.direction === "down" ? "top" : "bottom",
-      duration: e.parent.props.duration,
-      "destroy-on-close": !1,
-      overlay: e.parent.props.overlay,
-      onClosed: e.handleClose,
-      lockScroll: e.parent.props.lockScroll,
-      teleportDisable: !1,
-      "close-on-click-overlay": e.parent.props.closeOnClickOverlay
+    }, _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,
+      "destroy-on-close": false,
+      overlay: _ctx.parent.props.overlay,
+      onClosed: _ctx.handleClose,
+      lockScroll: _ctx.parent.props.lockScroll,
+      teleportDisable: false,
+      "close-on-click-overlay": _ctx.parent.props.closeOnClickOverlay
     }), {
-      default: q(() => [
-        v("view", Z, [
-          (r(!0), i(G, null, H(e.options, (n, k) => (r(), i("view", {
-            key: k,
-            class: f(["nut-menu-item__option", [{ active: n.value === e.modelValue }]]),
-            style: p({ "flex-basis": 100 / e.cols + "%" }),
-            onClick: (N) => e.onClick(n)
-          }, [
-            n.value === e.modelValue ? (r(), i("span", {
-              key: 0,
-              class: f(["nut-menu-item__span", [n.value === e.modelValue ? e.activeTitleClass : e.inactiveTitleClass]])
+      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)
             }, [
-              O(e.$slots, "icon", {}, () => [
-                $(u, T(e.$attrs, {
-                  color: e.parent.props.activeColor
-                }), null, 16, ["color"])
-              ])
-            ], 2)) : J("", !0),
-            v("view", {
-              class: f([n.value === e.modelValue ? e.activeTitleClass : e.inactiveTitleClass]),
-              style: p({ color: n.value === e.modelValue ? e.parent.props.activeColor : "" })
-            }, K(n.text), 7)
-          ], 14, _))), 128)),
-          O(e.$slots, "default")
+              option.value === _ctx.modelValue ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                class: normalizeClass(["nut-menu-item__span", [option.value === _ctx.modelValue ? _ctx.activeTitleClass : _ctx.inactiveTitleClass]])
+              }, [
+                renderSlot(_ctx.$slots, "icon", {}, () => [
+                  createVNode(_component_Check, mergeProps(_ctx.$attrs, {
+                    color: _ctx.parent.props.activeColor
+                  }), null, 16, ["color"])
+                ])
+              ], 2)) : createCommentVNode("", true),
+              createElementVNode("view", {
+                class: normalizeClass([option.value === _ctx.modelValue ? _ctx.activeTitleClass : _ctx.inactiveTitleClass]),
+                style: normalizeStyle({ color: option.value === _ctx.modelValue ? _ctx.parent.props.activeColor : "" })
+              }, toDisplayString(option.text), 7)
+            ], 14, _hoisted_2);
+          }), 128)),
+          renderSlot(_ctx.$slots, "default")
         ])
       ]),
       _: 3
     }, 16, ["visible", "position", "duration", "overlay", "onClosed", "lockScroll", "close-on-click-overlay"])
   ], 4)), [
-    [b, e.state.showWrapper]
+    [vShow, _ctx.state.showWrapper]
   ]);
 }
-const pe = /* @__PURE__ */ R(Y, [["render", x]]);
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  pe as default
+  index as default
 };