@nutui/nutui 4.0.9-beta.2 → 4.0.10-beta.1

package/dist/packages/_es/Collapse.js

@@ -1,4 +1,4 @@
-import { ref, computed, provide, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
+import { ref, computed, watch, provide, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
 import { c as createComponent } from "./component-81a4c1d0.js";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
@@ -7,7 +7,7 @@ const _sfc_main = create({
   props: {
     modelValue: {
       type: [String, Number, Array],
-      default: () => []
+      default: ""
     },
     accordion: {
       type: Boolean,
@@ -17,30 +17,35 @@ const _sfc_main = create({
   emits: ["update:modelValue", "change"],
   setup(props, { emit }) {
     const collapseDom = ref(null);
+    const innerValue = ref(props.modelValue || (props.accordion ? "" : []));
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true
       };
     });
+    watch(() => props.modelValue, (val) => {
+      innerValue.value = val;
+    });
     const changeVal = (val, name, status = true) => {
+      innerValue.value = val;
       emit("update:modelValue", val);
       emit("change", val, name, status);
     };
     const updateVal = (name) => {
       if (props.accordion) {
-        if (props.modelValue === name) {
+        if (innerValue.value === name) {
           changeVal("", name, false);
         } else {
           changeVal(name, name, true);
         }
       } else {
-        if (Array.isArray(props.modelValue)) {
-          if (props.modelValue.includes(name)) {
-            const newValue = props.modelValue.filter((v) => v !== name);
+        if (Array.isArray(innerValue.value)) {
+          if (innerValue.value.includes(name)) {
+            const newValue = innerValue.value.filter((v) => v !== name);
             changeVal(newValue, name, false);
           } else {
-            const newValue = props.modelValue.concat([name]);
+            const newValue = innerValue.value.concat([name]);
             changeVal(newValue, name, true);
           }
         } else {
@@ -50,9 +55,9 @@ const _sfc_main = create({
     };
     const isExpanded = (name) => {
       if (props.accordion) {
-        return props.modelValue === name;
-      } else if (Array.isArray(props.modelValue)) {
-        return props.modelValue.includes(name);
+        return innerValue.value === name;
+      } else if (Array.isArray(innerValue.value)) {
+        return innerValue.value.includes(name);
       }
       return false;
     };

package/dist/packages/_es/Dialog.js

@@ -41,7 +41,7 @@ const _sfc_main = create({
   props: __spreadProps(__spreadValues({}, popupProps), {
     closeOnClickOverlay: {
       type: Boolean,
-      default: false
+      default: true
     },
     title: {
       type: String,
@@ -147,6 +147,11 @@ const _sfc_main = create({
       emit("ok");
       closed("ok");
     };
+    const onClickOverlay = () => {
+      if (props.closeOnClickOverlay) {
+        closed("");
+      }
+    };
     const contentStyle = computed(() => {
       return {
         textAlign: props.textAlign
@@ -158,6 +163,7 @@ const _sfc_main = create({
       onCancel,
       onOk,
       showPopup,
+      onClickOverlay,
       contentStyle,
       translate
     };
@@ -175,14 +181,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     teleport: _ctx.teleport,
     visible: _ctx.showPopup,
     "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => _ctx.showPopup = $event),
-    "close-on-click-overlay": _ctx.closeOnClickOverlay,
+    "close-on-click-overlay": false,
     "lock-scroll": _ctx.lockScroll,
     "pop-class": _ctx.popClass,
     "overlay-class": _ctx.overlayClass,
     "overlay-style": _ctx.overlayStyle,
     style: normalizeStyle(_ctx.popStyle),
     round: "",
-    onClickOverlay: _ctx.closed,
+    onClickOverlay: _ctx.onClickOverlay,
     onClickCloseIcon: _ctx.closed
   }, {
     default: withCtx(() => [
@@ -238,7 +244,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ], 2)
     ]),
     _: 3
-  }, 8, ["teleport", "visible", "close-on-click-overlay", "lock-scroll", "pop-class", "overlay-class", "overlay-style", "style", "onClickOverlay", "onClickCloseIcon"]);
+  }, 8, ["teleport", "visible", "lock-scroll", "pop-class", "overlay-class", "overlay-style", "style", "onClickOverlay", "onClickCloseIcon"]);
 }
 const Dialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 class DialogOptions {
@@ -270,6 +276,7 @@ class DialogOptions {
     __publicField(this, "noCancelBtn", false);
     __publicField(this, "okBtnDisabled", false);
     __publicField(this, "closeOnPopstate", false);
+    __publicField(this, "closeOnClickOverlay", true);
     __publicField(this, "lockScroll", true);
   }
 }

package/dist/packages/_es/ImagePreview.js

@@ -22,7 +22,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { reactive, computed, watch, toRefs, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, normalizeStyle, createElementBlock, createCommentVNode, ref, onMounted, Fragment, renderList, toDisplayString, normalizeClass, renderSlot, createVNode, h } from "vue";
+import { reactive, computed, watch, toRefs, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, normalizeStyle, createElementBlock, createCommentVNode, ref, onMounted, Fragment, renderList, toDisplayString, normalizeClass, renderSlot, createVNode, nextTick, h } from "vue";
 import { c as createComponent, e as clamp, d as preventDefault, i as isArray } from "./component-81a4c1d0.js";
 import { u as useRect } from "./index-29892cda.js";
 import { u as useTouch } from "./index-7a7385e4.js";
@@ -63,6 +63,10 @@ const _sfc_main$1 = create$1({
     rootHeight: {
       type: Number,
       default: 0
+    },
+    contentClose: {
+      type: Boolean,
+      default: true
     }
   }),
   emits: ["close", "scale"],
@@ -204,7 +208,9 @@ const _sfc_main$1 = create$1({
           toggleScale();
         } else {
           doubleTapTimer = setTimeout(() => {
-            emit("close");
+            if (props.contentClose) {
+              emit("close");
+            }
             doubleTapTimer = null;
           }, TAP_TIME);
         }
@@ -445,9 +451,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 show: _ctx.showPop,
                 "init-no": _ctx.active + 1,
                 onClose: _ctx.onClose,
+                "content-close": _ctx.contentClose,
                 maxZoom: _ctx.maxZoom,
                 minZoom: _ctx.minZoom
-              }, null, 8, ["video", "image", "rootHeight", "rootWidth", "show", "init-no", "onClose", "maxZoom", "minZoom"]);
+              }, null, 8, ["video", "image", "rootHeight", "rootWidth", "show", "init-no", "onClose", "content-close", "maxZoom", "minZoom"]);
             }), 128))
           ]),
           _: 1
@@ -502,7 +509,10 @@ class ImagePreviewFunction {
           setup() {
             return () => {
               options.onClose = () => {
-                unmount();
+                options.show = false;
+                nextTick(() => {
+                  unmount();
+                });
               };
               return h(ImagePreview, options);
             };

package/dist/packages/_es/Menu.js

@@ -25,9 +25,8 @@ const _sfc_main = create({
     },
     duration: {
       type: [Number, String],
-      default: 0
+      default: 0.3
     },
-    titleIcon: String,
     closeOnClickOverlay: {
       type: Boolean,
       default: true

package/dist/packages/_es/MenuItem.js

@@ -17,14 +17,14 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { reactive, computed, inject, getCurrentInstance, onUnmounted, resolveComponent, withDirectives, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, vShow, createVNode, mergeProps, withCtx, Fragment, renderList, renderSlot, createCommentVNode, toDisplayString } from "vue";
+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 { componentName, create } = createComponent("menu-item");
+const { create } = createComponent("menu-item");
 const _sfc_main = create({
   props: {
     title: String,
@@ -42,23 +42,17 @@ const _sfc_main = create({
       default: 1
     },
     activeTitleClass: String,
-    inactiveTitleClass: String,
-    optionIcon: {
-      type: String,
-      default: "Check"
-    }
+    inactiveTitleClass: String
   },
   components: {
     [Popup.name]: Popup,
     Check
   },
   emits: ["update:modelValue", "change", "open", "close"],
-  setup(props, { emit, slots }) {
+  setup(props, { emit }) {
     const state = reactive({
       showPopup: false,
-      transition: true,
-      showWrapper: false,
-      isShowPlaceholderElement: false
+      showWrapper: false
     });
     const useParent = () => {
       const parent2 = inject("menuParent", null);
@@ -69,32 +63,30 @@ const _sfc_main = create({
         onUnmounted(() => {
           removeLink(instance);
         });
-        return {
-          parent: parent2
-        };
+        return { parent: parent2 };
       }
     };
     const { parent } = useParent();
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
+    const style = computed(() => {
+      return parent.props.direction === "down" ? {
+        top: parent.offset.value + "px"
+      } : {
+        bottom: parent.offset.value + "px"
       };
     });
     const placeholderElementStyle = computed(() => {
       const heightStyle = { height: parent.offset.value + "px" };
       if (parent.props.direction === "down") {
-        return heightStyle;
+        return __spreadProps(__spreadValues({}, heightStyle), { top: "0px" });
       } else {
-        return __spreadProps(__spreadValues({}, heightStyle), { top: "auto" });
+        return __spreadProps(__spreadValues({}, heightStyle), { bottom: "0px" });
       }
     });
-    const toggle = (show = !state.showPopup, options = {}) => {
+    const toggle = (show = !state.showPopup) => {
       if (show === state.showPopup) {
         return;
       }
       state.showPopup = show;
-      state.isShowPlaceholderElement = show;
       if (show) {
         state.showWrapper = true;
         emit("open");
@@ -110,7 +102,6 @@ const _sfc_main = create({
     };
     const onClick = (option) => {
       state.showPopup = false;
-      state.isShowPlaceholderElement = false;
       if (option.value !== props.modelValue) {
         emit("update:modelValue", option.value);
         emit("change", option.value);
@@ -119,14 +110,13 @@ const _sfc_main = create({
     const handleClose = () => {
       emit("close");
       state.showWrapper = false;
-      state.isShowPlaceholderElement = false;
     };
     const handleClickOutside = () => {
       state.showPopup = false;
       emit("close");
     };
     return {
-      classes,
+      style,
       placeholderElementStyle,
       renderTitle,
       state,
@@ -144,24 +134,24 @@ 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: normalizeClass(_ctx.classes)
+    class: "nut-menu-item",
+    style: normalizeStyle(_ctx.style)
   }, [
     withDirectives(createElementVNode("div", {
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClickOutside && _ctx.handleClickOutside(...args)),
-      class: normalizeClass(["nut-menu-item-placeholder-element", { up: _ctx.parent.props.direction === "up" }]),
+      class: "nut-menu-item-placeholder-element",
       style: normalizeStyle(_ctx.placeholderElementStyle)
-    }, null, 6), [
-      [vShow, _ctx.state.isShowPlaceholderElement]
+    }, null, 4), [
+      [vShow, _ctx.state.showPopup]
     ]),
     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", top: "auto" }
+      style: { position: "absolute" },
+      overlayStyle: { position: "absolute" }
     }, _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",
       "destroy-on-close": false,
       overlay: _ctx.parent.props.overlay,
       onClosed: _ctx.handleClose,
@@ -198,8 +188,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ])
       ]),
       _: 3
-    }, 16, ["style", "overlayStyle", "visible", "position", "duration", "overlay", "onClosed", "lockScroll", "close-on-click-overlay"])
-  ], 2)), [
+    }, 16, ["visible", "position", "duration", "overlay", "onClosed", "lockScroll", "close-on-click-overlay"])
+  ], 4)), [
     [vShow, _ctx.state.showWrapper]
   ]);
 }

package/dist/packages/_es/Picker.js

@@ -28,7 +28,7 @@ const usePicker = (props, emit) => {
   const state = reactive({
     formattedColumns: props.columns
   });
-  let defaultValues = ref([]);
+  const defaultValues = ref([]);
   const pickerColumn = ref([]);
   const swipeRef = (el) => {
     if (el && pickerColumn.value.length < columnsList.value.length) {
@@ -42,13 +42,9 @@ const usePicker = (props, emit) => {
     };
   });
   const selectedOptions = computed(() => {
-    let optins = [];
-    columnsList.value.map((column2, index) => {
-      let currOptions = [];
-      currOptions = column2.filter((item) => item.value == defaultValues.value[index]);
-      optins.push(currOptions[0]);
+    return columnsList.value.map((column2, index) => {
+      return column2.find((item) => item.value === defaultValues.value[index]);
     });
-    return optins;
   });
   const columnsType = computed(() => {
     const firstColumn = state.formattedColumns[0];
@@ -83,8 +79,8 @@ const usePicker = (props, emit) => {
     while (cursor && cursor.children) {
       const options = cursor.children;
       const value = defaultValues2[columnIndex];
-      let index = options.findIndex((columnItem) => columnItem.value == value);
-      if (index == -1)
+      let index = options.findIndex((columnItem) => columnItem.value === value);
+      if (index === -1)
         index = 0;
       cursor = cursor.children[index];
       columnIndex++;
@@ -110,7 +106,7 @@ const usePicker = (props, emit) => {
           index++;
           cursor = cursor.children[0];
         }
-        if (cursor && cursor.children && cursor.children.length == 0) {
+        if (cursor && cursor.children && cursor.children.length === 0) {
           defaultValues.value = defaultValues.value.slice(0, index + 1);
         }
       } else {
@@ -350,7 +346,7 @@ const _sfc_main$1 = create$1({
     };
     const modifyStatus = (type) => {
       const { column: column2 } = props;
-      let index = column2.findIndex((columnItem) => columnItem.value == props.value);
+      let index = column2.findIndex((columnItem) => columnItem.value === props.value);
       state.currIndex = index === -1 ? 1 : index + 1;
       let move = index === -1 ? 0 : index * +props.optionHeight;
       type && setChooseValue();

package/dist/packages/_es/Row.js

@@ -1,4 +1,4 @@
-import { provide, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
+import { provide, computed, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
 import { c as createComponent } from "./component-81a4c1d0.js";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
@@ -33,23 +33,23 @@ const _sfc_main = create({
     const getClass = (prefix, type) => {
       return prefix ? type ? `nut-row-${prefix}-${type}` : "" : `nut-row-${type}`;
     };
-    const getClasses = () => {
-      return `
-              ${getClass("", props.type)}
-              ${getClass("justify", props.justify)}
-              ${getClass("align", props.align)}
-              ${getClass("flex", props.flexWrap)}
-              ${prefixCls}
-              `;
-    };
+    const classes = computed(() => {
+      return [
+        prefixCls,
+        getClass("", props.type),
+        getClass("justify", props.justify),
+        getClass("align", props.align),
+        getClass("flex", props.flexWrap)
+      ];
+    });
     return {
-      getClasses
+      classes
     };
   }
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("view", {
-    class: normalizeClass(_ctx.getClasses())
+    class: normalizeClass(_ctx.classes)
   }, [
     renderSlot(_ctx.$slots, "default")
   ], 2);

package/dist/packages/_es/Searchbar.js

@@ -32,12 +32,16 @@ const _sfc_main = create({
     },
     inputType: {
       type: String,
-      default: "textarea"
+      default: "text"
     },
     label: {
       type: String,
       default: ""
     },
+    shape: {
+      type: String,
+      default: "round"
+    },
     maxLength: {
       type: [String, Number],
       default: "9999"
@@ -64,9 +68,7 @@ const _sfc_main = create({
     },
     focusStyle: {
       type: Object,
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      default: () => {
-      }
+      default: () => ({})
     },
     autofocus: {
       type: Boolean,
@@ -96,7 +98,7 @@ const _sfc_main = create({
     "click-left-icon",
     "click-right-icon"
   ],
-  setup(props, { slots, emit }) {
+  setup(props, { emit }) {
     const state = reactive({
       active: false
     });
@@ -215,7 +217,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       renderSlot(_ctx.$slots, "leftout")
     ])) : createCommentVNode("", true),
     createElementVNode("view", {
-      class: "nut-searchbar__search-input",
+      class: normalizeClass([`nut-searchbar__search-input`, _ctx.shape]),
       style: normalizeStyle(__spreadValues(__spreadValues({}, _ctx.inputSearchbarStyle), _ctx.focusCss))
     }, [
       _ctx.$slots.leftin ? (openBlock(), createElementBlock("view", {
@@ -266,7 +268,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           renderSlot(_ctx.$slots, "rightin")
         ])) : createCommentVNode("", true)
       ], 2)
-    ], 4),
+    ], 6),
     _ctx.$slots.rightout ? (openBlock(), createElementBlock("view", _hoisted_5, [
       renderSlot(_ctx.$slots, "rightout")
     ])) : createCommentVNode("", true)

package/dist/packages/_es/Tabs.js

@@ -404,10 +404,13 @@ const _sfc_main = create({
       };
     });
     const titleStyle = computed(() => {
-      return {
-        marginLeft: pxCheck(props.titleGutter),
-        marginRight: pxCheck(props.titleGutter)
-      };
+      if (!props.titleGutter)
+        return {};
+      const px = pxCheck(props.titleGutter);
+      if (props.direction === "vertical") {
+        return { marginTop: px, marginBottom: px };
+      }
+      return { marginLeft: px, marginRight: px };
     });
     return __spreadValues(__spreadValues({
       navRef,
@@ -430,8 +433,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_nut_sticky = resolveComponent("nut-sticky");
   return openBlock(), createElementBlock("view", {
     class: normalizeClass(["nut-tabs", [_ctx.direction]]),
-    ref: "container",
-    id: "container"
+    ref: "container"
   }, [
     _ctx.sticky ? (openBlock(), createBlock(_component_nut_sticky, {
       key: 0,

package/dist/packages/col/index.scss

@@ -15,10 +15,10 @@
 
 @for $i from 1 through 24 {
   .nut-col-offset-#{$i} {
-    margin-left: calc(100 / 24) * $i * 1%;
+    margin-left: calc((100 / 24) * #{$i} * 1%);
   }
 
   .nut-col-#{$i} {
-    width: calc(100 / 24) * $i * 1%;
+    width: calc((100 / 24) * #{$i} * 1%);
   }
 }

package/dist/packages/imagepreview/index.scss

@@ -18,11 +18,6 @@
     object-fit: contain;
   }
 
-  &-taro-img {
-    width: 100%;
-    height: 100%;
-  }
-
   &-index {
     position: fixed;
     z-index: 2002;

package/dist/packages/menuitem/index.scss

@@ -9,6 +9,13 @@
 }
 
 .nut-menu-item {
+  position: fixed;
+  z-index: $menu-bar-opened-z-index;
+  left: 0;
+  right: 0;
+  height: 100vh;
+  overflow: hidden;
+
   .active {
     font-weight: $menu-active-item-font-weight;
     color: $menu-item-active-text-color !important;
@@ -40,20 +47,10 @@
   }
 }
 
-.nut-menu__pop {
-  transition: height linear 3s;
-  transform: none;
-}
-
 .nut-menu-item-placeholder-element {
   position: fixed;
-  top: $menu-bar-line-height;
   left: 0;
   right: 0;
   z-index: $menu-bar-opened-z-index;
   background-color: transparent;
-
-  &.up {
-    bottom: $menu-bar-line-height;
-  }
 }

package/dist/packages/searchbar/index.scss

@@ -48,6 +48,10 @@
     background: $searchbar-input-background;
     box-sizing: border-box;
 
+    &.square {
+      border-radius: 0;
+    }
+
     .nut-searchbar__input-inner {
       display: flex;
       position: relative;

package/dist/smartips/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "NutUI",
-  "version": "4.0.9-beta.2",
+  "version": "4.0.10-beta.1",
   "contributions": {
     "html": {
       "tags": [
@@ -2794,7 +2794,7 @@
             },
             {
               "name": "content-close",
-              "default": "`false`",
+              "default": "`true`",
               "description": "点击图片可以退出预览",
               "value": {
                 "type": "boolean",
@@ -4924,7 +4924,7 @@
             },
             {
               "name": "shape",
-              "default": "`square`",
+              "default": "`round`",
               "description": "搜索框形状，可选值为 `square` `round`",
               "value": {
                 "type": "string",