init

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/menuitem/menuitem.js

@@ -0,0 +1,220 @@
+"use strict";
+const common_vendor = require("../../../../common/vendor.js");
+const uni_modules_nutuiUni_components__constants_event = require("../_constants/event.js");
+const uni_modules_nutuiUni_components__constants_prefix = require("../_constants/prefix.js");
+const uni_modules_nutuiUni_components__hooks_useInject = require("../_hooks/useInject.js");
+require("../_utils/env.js");
+const uni_modules_nutuiUni_components__utils_style = require("../_utils/style.js");
+const menu = require("../../../../menu.js");
+const uni_modules_nutuiUni_components__utils_props = require("../_utils/props.js");
+const menuitemProps = {
+  ...uni_modules_nutuiUni_components__utils_props.commonProps,
+  /**
+   * @@description 菜单项标题
+   */
+  title: String,
+  /**
+   * @description 选项数组
+   */
+  options: uni_modules_nutuiUni_components__utils_props.makeArrayProp([]),
+  /**
+   * @description 是否禁用菜单
+   */
+  disabled: Boolean,
+  modelValue: [String, Number],
+  /**
+   * @description 可以设置一行展示多少列 `options`
+   */
+  cols: uni_modules_nutuiUni_components__utils_props.makeNumberProp(1),
+  /**
+   * @description 选项选中时自定义标题样式类
+   */
+  activeTitleClass: String,
+  /**
+   * @description 选项非选中时自定义标题样式类
+   */
+  inactiveTitleClass: String,
+  /**
+   * @description 选项选中时选中图标
+   */
+  optionIcon: uni_modules_nutuiUni_components__utils_props.makeStringProp("Check")
+};
+const menuitemEmits = {
+  [uni_modules_nutuiUni_components__constants_event.UPDATE_MODEL_EVENT]: (value) => true,
+  [uni_modules_nutuiUni_components__constants_event.CHANGE_EVENT]: (value) => true,
+  [uni_modules_nutuiUni_components__constants_event.OPEN_EVENT]: () => true,
+  [uni_modules_nutuiUni_components__constants_event.CLOSE_EVENT]: () => true,
+  itemClick: (item) => true
+};
+const Icon = () => "../icon/icon.js";
+const PopUp = () => "../popup/popup.js";
+const componentName = `${uni_modules_nutuiUni_components__constants_prefix.PREFIX}-menu-item`;
+const _sfc_main = common_vendor.defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: "shared"
+  },
+  components: {
+    PopUp,
+    Icon
+  },
+  props: menuitemProps,
+  emits: menuitemEmits,
+  setup(props, { emit, expose }) {
+    const state = common_vendor.reactive({
+      showPopup: false,
+      showWrapper: false
+    });
+    const { parent } = uni_modules_nutuiUni_components__hooks_useInject.useInject(menu.MENU_KEY);
+    const classes = common_vendor.computed(() => {
+      return uni_modules_nutuiUni_components__utils_style.getMainClass(props, componentName, {
+        "nut-hidden": !state.showWrapper
+      });
+    });
+    const styles = common_vendor.computed(() => {
+      if ((parent == null ? void 0 : parent.props.offset) > 0) {
+        const obj = (parent == null ? void 0 : parent.props.direction) === "down" ? { top: `${parent == null ? void 0 : parent.props.offset}px` } : { bottom: `${parent == null ? void 0 : parent.offset.value}px` };
+        return uni_modules_nutuiUni_components__utils_style.getMainStyle(props, obj);
+      } else {
+        const obj = (parent == null ? void 0 : parent.props.direction) === "down" ? { top: `${parent == null ? void 0 : parent.offset.value}px` } : { bottom: `${parent == null ? void 0 : parent.offset.value}px` };
+        return uni_modules_nutuiUni_components__utils_style.getMainStyle(props, obj);
+      }
+    });
+    const placeholderElementStyle = common_vendor.computed(() => {
+      const heightStyle = { height: `${parent == null ? void 0 : parent.offset.value}px` };
+      if ((parent == null ? void 0 : parent.props.direction) === "down")
+        return { ...heightStyle, top: 0 };
+      return { ...heightStyle, top: "auto" };
+    });
+    const open = () => {
+      state.showPopup = true;
+      state.showWrapper = true;
+    };
+    const close = () => {
+      state.showPopup = false;
+    };
+    const toggle = (show = !state.showPopup) => {
+      if (show === state.showPopup)
+        return;
+      if (show)
+        open();
+      else
+        close();
+    };
+    const change = (value) => {
+      if (value === props.modelValue)
+        return;
+      emit("update:modelValue", value);
+      emit("change", value);
+    };
+    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;
+      emit("itemClick", option);
+      change(option.value);
+    };
+    const handleClose = () => {
+      state.showWrapper = false;
+    };
+    const handleClickOutside = () => {
+      state.showPopup = false;
+    };
+    const handleVisible = (visible) => {
+      if (visible)
+        emit(uni_modules_nutuiUni_components__constants_event.OPEN_EVENT);
+      else
+        emit(uni_modules_nutuiUni_components__constants_event.CLOSE_EVENT);
+    };
+    expose({
+      change,
+      open,
+      close,
+      toggle
+    });
+    return {
+      classes,
+      styles,
+      placeholderElementStyle,
+      renderTitle,
+      state,
+      parent,
+      toggle,
+      onClick,
+      handleClose,
+      handleVisible,
+      handleClickOutside
+    };
+  }
+});
+if (!Array) {
+  const _component_Icon = common_vendor.resolveComponent("Icon");
+  const _component_PopUp = common_vendor.resolveComponent("PopUp");
+  (_component_Icon + _component_PopUp)();
+}
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _a, _b, _c, _d, _e, _f;
+  return {
+    a: !_ctx.state.showPopup ? 1 : "",
+    b: ((_a = _ctx.parent) == null ? void 0 : _a.props.direction) === "up" ? 1 : "",
+    c: common_vendor.s(_ctx.placeholderElementStyle),
+    d: common_vendor.o((...args) => _ctx.handleClickOutside && _ctx.handleClickOutside(...args)),
+    e: common_vendor.f(_ctx.options, (option, index, i0) => {
+      var _a2, _b2;
+      return common_vendor.e({
+        a: option.value === _ctx.modelValue
+      }, option.value === _ctx.modelValue ? {
+        b: "2b8bcb1a-1-" + i0 + ",2b8bcb1a-0",
+        c: common_vendor.p({
+          name: _ctx.optionIcon,
+          ["custom-color"]: (_a2 = _ctx.parent) == null ? void 0 : _a2.props.activeColor
+        }),
+        d: common_vendor.n(option.value === _ctx.modelValue ? _ctx.activeTitleClass : _ctx.inactiveTitleClass)
+      } : {}, {
+        e: common_vendor.t(option.text),
+        f: common_vendor.n(option.value === _ctx.modelValue ? _ctx.activeTitleClass : _ctx.inactiveTitleClass),
+        g: option.value === _ctx.modelValue ? (_b2 = _ctx.parent) == null ? void 0 : _b2.props.activeColor : "",
+        h: index,
+        i: common_vendor.n({
+          active: option.value === _ctx.modelValue
+        }),
+        j: common_vendor.o(($event) => _ctx.onClick(option), index)
+      });
+    }),
+    f: `${100 / _ctx.cols}%`,
+    g: common_vendor.o(_ctx.handleClose),
+    h: common_vendor.o(($event) => _ctx.handleVisible(true)),
+    i: common_vendor.o(($event) => _ctx.handleVisible(false)),
+    j: common_vendor.o(($event) => _ctx.state.showPopup = $event),
+    k: common_vendor.p({
+      ..._ctx.$attrs,
+      ["custom-style"]: {
+        position: "absolute"
+      },
+      ["overlay-style"]: {
+        position: "absolute"
+      },
+      position: ((_b = _ctx.parent) == null ? void 0 : _b.props.direction) === "down" ? "top" : "bottom",
+      duration: (_c = _ctx.parent) == null ? void 0 : _c.props.duration,
+      ["pop-class"]: "nut-menu__pop",
+      ["destroy-on-close"]: false,
+      ["safe-area-inset-top"]: false,
+      overlay: (_d = _ctx.parent) == null ? void 0 : _d.props.overlay,
+      ["lock-scroll"]: (_e = _ctx.parent) == null ? void 0 : _e.props.lockScroll,
+      ["close-on-click-overlay"]: (_f = _ctx.parent) == null ? void 0 : _f.props.closeOnClickOverlay,
+      visible: _ctx.state.showPopup
+    }),
+    l: common_vendor.n(_ctx.classes),
+    m: common_vendor.s(_ctx.styles)
+  };
+}
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
+wx.createComponent(Component);
+//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/nutui-uni/components/menuitem/menuitem.js.map

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/menuitem/menuitem.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "icon": "../icon/icon",
+    "pop-up": "../popup/popup"
+  }
+}

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/menuitem/menuitem.wxml

@@ -0,0 +1 @@
+<view class="{{l}}" style="{{m}}"><view class="{{['nut-menu-item-placeholder-element', a && 'nut-hidden', b && 'placeholder-element-up']}}" style="{{c}}" bindtap="{{d}}"/><pop-up wx:if="{{k}}" u-s="{{['d']}}" bindclosed="{{g}}" bindopen="{{h}}" bindclose="{{i}}" u-i="2b8bcb1a-0" bind:__l="__l" bindupdateVisible="{{j}}" u-p="{{k}}"><scroll-view scroll-y="{{true}}"><view id="nut-menu-item__content" class="nut-menu-item__content"><view wx:for="{{e}}" wx:for-item="option" wx:key="h" class="{{['nut-menu-item__option', option.i]}}" style="{{'flex-basis:' + f}}" bindtap="{{option.j}}"><view wx:if="{{option.a}}" class="{{['nut-menu-item__span', option.d]}}"><icon wx:if="{{option.c}}" u-i="{{option.b}}" bind:__l="__l" u-p="{{option.c}}"/></view><view class="{{[option.f]}}" style="{{'color:' + option.g}}">{{option.e}}</view></view><slot/></view></scroll-view></pop-up></view>

unpackage/dist/dev/mp-weixin/uni_modules/nutui-uni/components/menuitem/menuitem.wxss

@@ -0,0 +1,216 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.nut-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--nut-overlay-bg-color, rgba(0, 0, 0, 0.7));
+}
+.nut-overflow-hidden {
+  overflow: hidden !important;
+}
+.nut-theme-dark .nut-popup {
+  background: var(--nut-dark-background2, #1b1b1b);
+}
+.nut-theme-dark .nut-popup__close-icon {
+  color: var(--nut-dark-color, var(--nut-white, #fff));
+}
+.nut-popup-slide-center-enter-active, .nut-popup-slide-center-leave-active {
+  transition-timing-function: ease;
+  transition-property: opacity;
+}
+.nut-popup-slide-center-enter-from, .nut-popup-slide-center-leave-to {
+  opacity: 0;
+}
+.nut-popup-slide-top-enter-from, .nut-popup-slide-top-leave-active {
+  transform: translate(0, -100%);
+}
+.nut-popup-slide-right-enter-from, .nut-popup-slide-right-leave-active {
+  transform: translate(100%, 0);
+}
+.nut-popup-slide-bottom-enter-from, .nut-popup-slide-bottom-leave-active {
+  transform: translate(0, 100%);
+}
+.nut-popup-slide-left-enter-from, .nut-popup-slide-left-leave-active {
+  transform: translate(-100%, 0);
+}
+.nut-popup--center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.nut-popup--center.round {
+  border-radius: var(--nut-popup-border-radius, 20px);
+}
+.nut-popup--bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+.nut-popup--bottom.round {
+  border-radius: var(--nut-popup-border-radius, 20px) var(--nut-popup-border-radius, 20px) 0 0;
+}
+.nut-popup--bottom--safebottom {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.nut-popup--right {
+  top: 0;
+  right: 0;
+}
+.nut-popup--right.round {
+  border-radius: var(--nut-popup-border-radius, 20px) 0 0 var(--nut-popup-border-radius, 20px);
+}
+.nut-popup--left {
+  top: 0;
+  left: 0;
+}
+.nut-popup--left.round {
+  border-radius: 0 var(--nut-popup-border-radius, 20px) var(--nut-popup-border-radius, 20px) 0;
+}
+.nut-popup--top {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.nut-popup--top.round {
+  border-radius: 0 0 var(--nut-popup-border-radius, 20px) var(--nut-popup-border-radius, 20px);
+}
+.nut-popup--top--safetop {
+  padding-top: var(--status-bar-height);
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+}
+.nut-popup {
+  position: fixed;
+  max-height: 100%;
+  overflow-y: auto;
+  background-color: var(--nut-white, #fff);
+  -webkit-overflow-scrolling: touch;
+}
+.nut-popup__close-icon {
+  position: absolute !important;
+  z-index: 1;
+  width: 30px;
+  height: 30px;
+  font-size: 18px;
+  line-height: 30px;
+  color: #969799;
+  text-align: center;
+  cursor: pointer;
+}
+.nut-popup__close-icon:active {
+  opacity: 0.7;
+}
+.nut-popup__close-icon--top-left {
+  top: var(--nut-popup-close-icon-margin, 16px);
+  left: var(--nut-popup-close-icon-margin, 16px);
+}
+.nut-popup__close-icon--top-right {
+  top: var(--nut-popup-close-icon-margin, 16px);
+  right: var(--nut-popup-close-icon-margin, 16px);
+}
+.nut-popup__close-icon--bottom-left {
+  bottom: var(--nut-popup-close-icon-margin, 16px);
+  left: var(--nut-popup-close-icon-margin, 16px);
+}
+.nut-popup__close-icon--bottom-right {
+  right: var(--nut-popup-close-icon-margin, 16px);
+  bottom: var(--nut-popup-close-icon-margin, 16px);
+}
+.nut-theme-dark .nut-menu-item__content .nut-menu-item__option {
+  color: var(--nut-dark-color, var(--nut-white, #fff));
+}
+.nut-menu-item {
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: var(--nut-menu-bar-opened-z-index, 2001);
+  height: 100vh;
+  overflow: hidden;
+}
+.nut-menu-item .active {
+  font-weight: var(--nut-menu-active-item-font-weight, 500);
+  color: var(--nut-menu-item-active-text-color, var(--nut-primary-color, #fa2c19)) !important;
+}
+.nut-menu-item__content {
+  display: flex;
+  flex-wrap: wrap;
+  max-height: var(--nut-menu-item-content-max-height, 214px);
+  padding: var(--nut-menu-item-content-padding, 12px 24px);
+}
+.nut-menu-item__content.nut-menu-item__overflow {
+  overflow-y: auto;
+}
+.nut-menu-item__content .nut-menu-item__option {
+  display: flex;
+  align-items: center;
+  padding-top: var(--nut-menu-item-option-padding-top, 12px);
+  padding-bottom: var(--nut-menu-item-option-padding-bottom, 12px);
+  padding-left: 12px;
+  padding-right: 12px;
+  font-size: var(--nut-font-size-2, 14px);
+  color: var(--nut-title-color, #1a1a1a);
+}
+.nut-menu-item__content .nut-menu-item__option .nut-menu-item__span {
+  display: flex;
+  align-items: center;
+  margin-right: var(--nut-menu-item-option-i-margin-right, 6px);
+}
+.nut-menu-item-placeholder-element {
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: var(--nut-menu-bar-opened-z-index, 2001);
+  background-color: transparent;
+}