@nutui/nutui 3.1.21 → 3.1.22-beta.5

package/dist/packages/_es/MenuItem.js

@@ -1,170 +1,45 @@
 /*!
-* @nutui/nutui v3.1.21 Mon May 30 2022 20:20:01 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 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 { reactive as e, computed as o, inject as t, getCurrentInstance as l, resolveComponent as n, withDirectives as p, openBlock as a, createElementBlock as r, normalizeClass as s, createElementVNode as i, normalizeStyle as u, vShow as c, createVNode as d, mergeProps as m, withCtx as h, Fragment as v, renderList as f, createBlock as y, createCommentVNode as w, toDisplayString as k, renderSlot as C } from "vue";
+import { c as P } from "./component.js";
+import S from "./Icon.js";
+import x from "./Popup.js";
+import { _ } 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"
+const { componentName: g, create: b } = P("menu-item"), V = b({ 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: { [S.name]: S, [x.name]: x }, emits: ["update:modelValue", "change"], setup(n2, { emit: p2, slots: a2 }) {
+  const r2 = e({ showPopup: false, transition: true, showWrapper: false, isShowPlaceholderElement: false }), { parent: s2 } = (() => {
+    const e2 = t("menuParent", null);
+    if (e2) {
+      const o2 = l(), { link: t2 } = e2;
+      return t2(o2), { parent: e2 };
     }
-  },
-  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,
-      "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: "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", "close-on-click-overlay"])
-  ], 2)), [
-    [vShow, _ctx.state.showWrapper]
-  ]);
-}
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index as default };
+  })();
+  return { classes: o(() => ({ [g]: true })), placeholderElementStyle: o(() => {
+    const e2 = { height: s2.offset.value + "px" };
+    return s2.props.direction === "down" ? e2 : { ...e2, top: "auto" };
+  }), renderTitle: () => {
+    var _a;
+    if (n2.title)
+      return n2.title;
+    const e2 = (_a = n2.options) == null ? void 0 : _a.find((e3) => e3.value === n2.modelValue);
+    return e2 ? e2.text : "";
+  }, state: r2, parent: s2, toggle: (e2 = !r2.showPopup, o2 = {}) => {
+    e2 !== r2.showPopup && (r2.showPopup = e2, r2.isShowPlaceholderElement = e2, e2 && (r2.showWrapper = true));
+  }, onClick: (e2) => {
+    r2.showPopup = false, r2.isShowPlaceholderElement = false, e2.value !== n2.modelValue && (p2("update:modelValue", e2.value), p2("change", e2.value));
+  }, handleClose: () => {
+    r2.showWrapper = false, r2.isShowPlaceholderElement = false;
+  }, handleClickOutside: () => {
+    r2.showPopup = false;
+  } };
+} }), E = { class: "nut-menu-item__content" }, j = ["onClick"];
+var O = _(V, [["render", function(e2, o2, t2, l2, P2, S2) {
+  const x2 = n("nut-icon"), _2 = n("nut-popup");
+  return p((a(), r("view", { class: s(e2.classes) }, [p(i("div", { onClick: o2[0] || (o2[0] = (...o3) => e2.handleClickOutside && e2.handleClickOutside(...o3)), class: s(["placeholder-element", { up: e2.parent.props.direction === "up" }]), style: u(e2.placeholderElementStyle) }, null, 6), [[c, e2.state.isShowPlaceholderElement]]), d(_2, m({ style: e2.parent.props.direction === "down" ? { top: e2.parent.offset.value + "px" } : { bottom: e2.parent.offset.value + "px" }, overlayStyle: e2.parent.props.direction === "down" ? { top: e2.parent.offset.value + "px" } : { bottom: e2.parent.offset.value + "px" } }, e2.$attrs, { visible: e2.state.showPopup, "onUpdate:visible": o2[1] || (o2[1] = (o3) => e2.state.showPopup = o3), position: e2.parent.props.direction === "down" ? "top" : "bottom", duration: e2.parent.props.duration, "pop-class": "nut-menu__pop", overlayClass: "nut-menu__overlay", overlay: e2.parent.props.overlay, onClosed: e2.handleClose, lockScroll: e2.parent.props.lockScroll, isWrapTeleport: false, "close-on-click-overlay": e2.parent.props.closeOnClickOverlay }), { default: h(() => [i("view", E, [(a(true), r(v, null, f(e2.options, (o3, t3) => (a(), r("view", { key: t3, class: s(["nut-menu-item__option", { active: o3.value === e2.modelValue }]), style: u({ "flex-basis": 100 / e2.cols + "%" }), onClick: (t4) => e2.onClick(o3) }, [o3.value === e2.modelValue ? (a(), y(x2, { key: 0, name: e2.optionIcon, color: e2.parent.props.activeColor }, null, 8, ["name", "color"])) : w("", true), i("view", { style: u({ color: o3.value === e2.modelValue ? e2.parent.props.activeColor : "" }) }, k(o3.text), 5)], 14, j))), 128)), C(e2.$slots, "default")])]), _: 3 }, 16, ["style", "overlayStyle", "visible", "position", "duration", "overlay", "onClosed", "lockScroll", "close-on-click-overlay"])], 2)), [[c, e2.state.showWrapper]]);
+}]]);
+export { O as default };

package/dist/packages/_es/Navbar.js

@@ -1,198 +1,36 @@
 /*!
-* @nutui/nutui v3.1.21 Mon May 30 2022 20:20:01 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { toRefs, ref, computed, onMounted, nextTick, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, createBlock, createCommentVNode, toDisplayString, renderSlot } from "vue";
-import { c as createComponent } from "./component.js";
-import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import { toRefs as e, ref as t, computed as l, onMounted as n, nextTick as a, resolveComponent as o, openBlock as i, createElementBlock as c, createElementVNode as s, normalizeClass as r, normalizeStyle as d, createBlock as u, createCommentVNode as f, toDisplayString as v, renderSlot as h } from "vue";
+import { c as p } from "./component.js";
+import { _ as k } 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: "" },
-    leftText: { type: String, default: "" },
-    desc: { type: String, default: "" },
-    fixed: {
-      type: Boolean,
-      default: false
-    },
-    safeAreaInsetTop: {
-      type: Boolean,
-      default: false
-    },
-    border: {
-      type: Boolean,
-      default: false
-    },
-    placeholder: {
-      type: Boolean,
-      default: true
-    },
-    zIndex: {
-      type: [Number, String],
-      default: 10
-    }
-  },
-  emits: ["on-click-back", "on-click-title", "on-click-icon", "on-click-right"],
-  setup(props, { emit }) {
-    const { border, fixed, safeAreaInsetTop, placeholder, zIndex } = toRefs(props);
-    const navBarWrap = ref(null);
-    const navBarHtml = ref(null);
-    let navHeight = ref(0);
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true,
-        [`${prefixCls}--border`]: border.value,
-        [`${prefixCls}--fixed`]: fixed.value,
-        [`${prefixCls}--safe-area-inset-top`]: safeAreaInsetTop.value
-      };
+const { componentName: y, create: g } = p("navbar"), _ = g({ props: { leftShow: { type: Boolean, default: true }, title: { type: String, default: "" }, titIcon: { type: String, default: "" }, leftText: { type: String, default: "" }, desc: { type: String, default: "" }, fixed: { type: Boolean, default: false }, safeAreaInsetTop: { type: Boolean, default: false }, border: { type: Boolean, default: false }, placeholder: { type: Boolean, default: true }, zIndex: { type: [Number, String], default: 10 } }, emits: ["on-click-back", "on-click-title", "on-click-icon", "on-click-right"], setup(o2, { emit: i2 }) {
+  const { border: c2, fixed: s2, safeAreaInsetTop: r2, placeholder: d2, zIndex: u2 } = e(o2), f2 = t(null), v2 = t(null);
+  let h2 = t(0);
+  const p2 = l(() => {
+    const e2 = y;
+    return { [e2]: true, [`${e2}--border`]: c2.value, [`${e2}--fixed`]: s2.value, [`${e2}--safe-area-inset-top`]: r2.value };
+  }), k2 = l(() => ({ zIndex: u2.value }));
+  return n(() => {
+    s2.value && d2.value && a(() => {
+      var _a;
+      h2 = (_a = v2 == null ? void 0 : v2.value) == null ? void 0 : _a.getBoundingClientRect().height, f2.value.style.height = h2 + "px";
     });
-    const styles = computed(() => {
-      return {
-        zIndex: zIndex.value
-      };
-    });
-    onMounted(() => {
-      if (fixed.value && placeholder.value) {
-        nextTick(() => {
-          var _a;
-          navHeight = (_a = navBarHtml == null ? void 0 : navBarHtml.value) == null ? void 0 : _a.getBoundingClientRect().height;
-          navBarWrap.value.style.height = navHeight + "px";
-        });
-      }
-    });
-    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 {
-      navBarWrap,
-      navBarHtml,
-      classes,
-      styles,
-      handleLeft,
-      handleCenter,
-      handleCenterIcon,
-      handleRight
-    };
-  }
-});
-const _hoisted_1 = {
-  key: 0,
-  class: "nut-navbar--placeholder",
-  ref: "navBarWrap"
-};
-const _hoisted_2 = {
-  key: 1,
-  class: "nut-navbar__text"
-};
-const _hoisted_3 = { class: "nut-navbar__title" };
-const _hoisted_4 = {
-  key: 0,
-  class: "nut-navbar__text"
-};
-const _hoisted_5 = {
-  key: 1,
-  class: "nut-navbar__text"
-};
-const _hoisted_6 = { class: "nut-navbar__title" };
-const _hoisted_7 = {
-  key: 0,
-  class: "nut-navbar__text"
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_nut_icon = resolveComponent("nut-icon");
-  return _ctx.fixed && _ctx.placeholder ? (openBlock(), createElementBlock("view", _hoisted_1, [
-    createElementVNode("view", {
-      class: normalizeClass(_ctx.classes),
-      style: normalizeStyle(_ctx.styles),
-      ref: "navBarHtml"
-    }, [
-      createElementVNode("view", {
-        class: "nut-navbar__left",
-        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleLeft && _ctx.handleLeft(...args))
-      }, [
-        _ctx.leftShow ? (openBlock(), createBlock(_component_nut_icon, {
-          key: 0,
-          color: "#979797",
-          name: "left"
-        })) : createCommentVNode("", true),
-        _ctx.leftText ? (openBlock(), createElementBlock("view", _hoisted_2, toDisplayString(_ctx.leftText), 1)) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "left")
-      ]),
-      createElementVNode("view", _hoisted_3, [
-        _ctx.title ? (openBlock(), createElementBlock("view", {
-          key: 0,
-          class: "title",
-          onClick: _cache[1] || (_cache[1] = (...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", {
-        class: "nut-navbar__right",
-        onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleRight && _ctx.handleRight(...args))
-      }, [
-        _ctx.desc ? (openBlock(), createElementBlock("view", _hoisted_4, toDisplayString(_ctx.desc), 1)) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "right")
-      ])
-    ], 6)
-  ], 512)) : (openBlock(), createElementBlock("view", {
-    key: 1,
-    class: normalizeClass(_ctx.classes),
-    style: normalizeStyle(_ctx.styles)
-  }, [
-    createElementVNode("view", {
-      class: "nut-navbar__left",
-      onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleLeft && _ctx.handleLeft(...args))
-    }, [
-      _ctx.leftShow ? (openBlock(), createBlock(_component_nut_icon, {
-        key: 0,
-        color: "#979797",
-        name: "left"
-      })) : createCommentVNode("", true),
-      _ctx.leftText ? (openBlock(), createElementBlock("view", _hoisted_5, toDisplayString(_ctx.leftText), 1)) : createCommentVNode("", true),
-      renderSlot(_ctx.$slots, "left")
-    ]),
-    createElementVNode("view", _hoisted_6, [
-      _ctx.title ? (openBlock(), createElementBlock("view", {
-        key: 0,
-        class: "title",
-        onClick: _cache[4] || (_cache[4] = (...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", {
-      class: "nut-navbar__right",
-      onClick: _cache[5] || (_cache[5] = (...args) => _ctx.handleRight && _ctx.handleRight(...args))
-    }, [
-      _ctx.desc ? (openBlock(), createElementBlock("view", _hoisted_7, toDisplayString(_ctx.desc), 1)) : createCommentVNode("", true),
-      renderSlot(_ctx.$slots, "right")
-    ])
-  ], 6));
-}
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index as default };
+  }), { navBarWrap: f2, navBarHtml: v2, classes: p2, styles: k2, handleLeft: function() {
+    i2("on-click-back");
+  }, handleCenter: function() {
+    i2("on-click-title");
+  }, handleCenterIcon: function() {
+    i2("on-click-icon");
+  }, handleRight: function() {
+    i2("on-click-right");
+  } };
+} }), m = { key: 0, class: "nut-navbar--placeholder", ref: "navBarWrap" }, x = { key: 1, class: "nut-navbar__text" }, C = { class: "nut-navbar__title" }, b = { key: 0, class: "nut-navbar__text" }, w = { key: 1, class: "nut-navbar__text" }, I = { class: "nut-navbar__title" }, B = { key: 0, class: "nut-navbar__text" };
+var $ = k(_, [["render", function(e2, t2, l2, n2, a2, p2) {
+  const k2 = o("nut-icon");
+  return e2.fixed && e2.placeholder ? (i(), c("view", m, [s("view", { class: r(e2.classes), style: d(e2.styles), ref: "navBarHtml" }, [s("view", { class: "nut-navbar__left", onClick: t2[0] || (t2[0] = (...t3) => e2.handleLeft && e2.handleLeft(...t3)) }, [e2.leftShow ? (i(), u(k2, { key: 0, color: "#979797", name: "left" })) : f("", true), e2.leftText ? (i(), c("view", x, v(e2.leftText), 1)) : f("", true), h(e2.$slots, "left")]), s("view", C, [e2.title ? (i(), c("view", { key: 0, class: "title", onClick: t2[1] || (t2[1] = (...t3) => e2.handleCenter && e2.handleCenter(...t3)) }, v(e2.title), 1)) : f("", true), e2.titIcon ? (i(), u(k2, { key: 1, class: "icon", name: e2.titIcon, onClick: e2.handleCenterIcon }, null, 8, ["name", "onClick"])) : f("", true), h(e2.$slots, "content")]), s("view", { class: "nut-navbar__right", onClick: t2[2] || (t2[2] = (...t3) => e2.handleRight && e2.handleRight(...t3)) }, [e2.desc ? (i(), c("view", b, v(e2.desc), 1)) : f("", true), h(e2.$slots, "right")])], 6)], 512)) : (i(), c("view", { key: 1, class: r(e2.classes), style: d(e2.styles) }, [s("view", { class: "nut-navbar__left", onClick: t2[3] || (t2[3] = (...t3) => e2.handleLeft && e2.handleLeft(...t3)) }, [e2.leftShow ? (i(), u(k2, { key: 0, color: "#979797", name: "left" })) : f("", true), e2.leftText ? (i(), c("view", w, v(e2.leftText), 1)) : f("", true), h(e2.$slots, "left")]), s("view", I, [e2.title ? (i(), c("view", { key: 0, class: "title", onClick: t2[4] || (t2[4] = (...t3) => e2.handleCenter && e2.handleCenter(...t3)) }, v(e2.title), 1)) : f("", true), e2.titIcon ? (i(), u(k2, { key: 1, class: "icon", name: e2.titIcon, onClick: e2.handleCenterIcon }, null, 8, ["name", "onClick"])) : f("", true), h(e2.$slots, "content")]), s("view", { class: "nut-navbar__right", onClick: t2[5] || (t2[5] = (...t3) => e2.handleRight && e2.handleRight(...t3)) }, [e2.desc ? (i(), c("view", B, v(e2.desc), 1)) : f("", true), h(e2.$slots, "right")])], 6));
+}]]);
+export { $ as default };