@nutui/nutui 3.3.1 → 4.0.0-beta.1

package/dist/packages/_es/InfiniteLoading.js

@@ -1,17 +1,22 @@
 /*!
-* @nutui/nutui v3.3.1 Fri Dec 16 2022 17:34:28 GMT+0800 (中国标准时间)
+* @nutui/nutui v4.0.0-beta.1 Mon Dec 26 2022 15:40:58 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { reactive, computed, onMounted, onUnmounted, ref, onActivated, onDeactivated, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, mergeProps, toDisplayString, renderSlot, createCommentVNode } from "vue";
-import { c as createComponent, g as getScrollTopRoot } from "./component.js";
-import { u as useTouch } from "./index4.js";
-import { r as requestAniFrame } from "./raf.js";
-import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import { ref, reactive, computed, onMounted, onUnmounted, onActivated, onDeactivated, watch, toRefs, nextTick, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, toDisplayString, createCommentVNode } from "vue";
+import { c as createComponent, l as getScrollTopRoot } from "./component-48526d37.js";
+import { u as useScrollParent } from "./index-95a5249b.js";
+import { r as requestAniFrame } from "./raf-e90b8c4d.js";
+import { Loading } from "@nutui/icons-vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-73a3d722.js";
 import "../locale/lang";
-const { componentName, create, translate } = createComponent("infiniteloading");
+const { componentName, create, translate } = createComponent("infinite-loading");
 const _sfc_main = create({
   props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
     hasMore: {
       type: Boolean,
       default: true
@@ -20,18 +25,6 @@ const _sfc_main = create({
       type: Number,
       default: 200
     },
-    pullIcon: {
-      type: String,
-      default: "https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png"
-    },
-    pullTxt: {
-      type: String,
-      default: ""
-    },
-    loadIcon: {
-      type: String,
-      default: "https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png"
-    },
     loadTxt: {
       type: String,
       default: ""
@@ -51,23 +44,18 @@ const _sfc_main = create({
     useCapture: {
       type: Boolean,
       default: false
-    },
-    isOpenRefresh: {
-      type: Boolean,
-      default: false
     }
   },
-  emits: ["scroll-change", "load-more", "refresh"],
+  emits: ["scroll-change", "load-more", "update:modelValue"],
+  components: {
+    Loading
+  },
   setup(props, { emit, slots }) {
-    const touch = useTouch();
+    const scroller = ref();
+    const scrollParent = useScrollParent(scroller);
     const state = reactive({
-      scrollEl: window,
-      scroller: null,
-      refreshTop: null,
       beforeScrollTop: 0,
-      isTouching: false,
       isInfiniting: false,
-      refreshMaxH: 0,
       y: 0,
       x: 0,
       distance: 0
@@ -78,12 +66,6 @@ const _sfc_main = create({
         [prefixCls]: true
       };
     });
-    const getStyle = computed(() => {
-      return {
-        height: state.distance < 0 ? `0px` : `${state.distance}px`,
-        transitionDuration: state.isTouching ? 0 : `0.2s`
-      };
-    });
     const calculateTopPosition = (el) => {
       return !el ? 0 : el.offsetTop + calculateTopPosition(el.offsetParent);
     };
@@ -91,14 +73,14 @@ const _sfc_main = create({
       let offsetDistance = 0;
       let resScrollTop = 0;
       let direction = "down";
-      if (props.useWindow) {
+      if (scrollParent.value == window) {
         const windowScrollTop = getScrollTopRoot();
-        if (state.scroller) {
-          offsetDistance = calculateTopPosition(state.scroller) + state.scroller.offsetHeight - windowScrollTop - window.innerHeight;
+        if (scroller.value) {
+          offsetDistance = calculateTopPosition(scroller.value) + scroller.value.offsetHeight - windowScrollTop - window.innerHeight;
         }
         resScrollTop = windowScrollTop;
       } else {
-        const { scrollHeight, clientHeight, scrollTop } = state.scrollEl;
+        const { scrollHeight, clientHeight, scrollTop } = scrollParent.value;
         offsetDistance = scrollHeight - clientHeight - scrollTop;
         resScrollTop = scrollTop;
       }
@@ -111,68 +93,24 @@ const _sfc_main = create({
       emit("scroll-change", resScrollTop);
       return offsetDistance <= props.threshold && direction == "down";
     };
-    const infiniteDone = () => {
-      state.isInfiniting = false;
-    };
     const handleScroll = () => {
       requestAniFrame(() => {
         if (!isScrollAtBottom() || !props.hasMore || state.isInfiniting) {
           return false;
         } else {
           state.isInfiniting = true;
-          emit("load-more", infiniteDone);
+          emit("update:modelValue", true);
+          nextTick(() => emit("load-more"));
         }
       });
     };
     const scrollListener = () => {
-      state.scrollEl.addEventListener("scroll", handleScroll, props.useCapture);
-    };
-    const refreshDone = () => {
-      state.distance = 0;
-      state.isTouching = false;
-    };
-    const touchStart = (event) => {
-      touch.start(event);
-      if (state.beforeScrollTop == 0 && !state.isTouching && props.isOpenRefresh) {
-        state.y = event.touches[0].pageY;
-        state.isTouching = true;
-        const childHeight = state.refreshTop.firstElementChild.offsetHeight;
-        state.refreshMaxH = Math.floor(childHeight * 1 + 10);
-      }
-    };
-    const touchMove = (event) => {
-      touch.move(event);
-      state.distance = event.touches[0].pageY - state.y;
-      if (touch.isVertical() && state.distance > 0 && state.isTouching) {
-        event.preventDefault();
-        if (state.distance >= state.refreshMaxH)
-          state.distance = state.refreshMaxH;
-      } else {
-        state.distance = 0;
-        state.isTouching = false;
-      }
-    };
-    const touchEnd = () => {
-      if (state.distance) {
-        if (state.distance < state.refreshMaxH) {
-          state.distance = 0;
-        } else {
-          emit("refresh", refreshDone);
-        }
-      }
-      setTimeout(() => {
-        touch.reset();
-      }, 0);
-    };
-    const getParentElement = (el) => {
-      return !!props.containerId ? document.querySelector(`#${props.containerId}`) : el && el.parentNode;
+      scrollParent.value && scrollParent.value.addEventListener("scroll", handleScroll, props.useCapture);
     };
     const removeScrollListener = () => {
-      state.scrollEl.removeEventListener("scroll", handleScroll, props.useCapture);
+      scrollParent.value && scrollParent.value.removeEventListener("scroll", handleScroll, props.useCapture);
     };
     onMounted(() => {
-      const parentElement = getParentElement(state.scroller);
-      state.scrollEl = props.useWindow ? window : parentElement;
       scrollListener();
     });
     onUnmounted(() => {
@@ -189,61 +127,55 @@ const _sfc_main = create({
       isKeepAlive.value = true;
       removeScrollListener();
     });
+    watch(
+      () => props.modelValue,
+      (val) => {
+        if (!val) {
+          state.isInfiniting = false;
+        }
+      }
+    );
     return {
       classes,
+      scroller,
       ...toRefs(state),
-      touchStart,
-      touchMove,
-      touchEnd,
-      getStyle,
       translate,
       slots
     };
   }
 });
-const _hoisted_1 = { class: "top-box" };
-const _hoisted_2 = { class: "top-text" };
-const _hoisted_3 = { class: "nut-infinite-container" };
-const _hoisted_4 = { class: "nut-infinite-bottom" };
-const _hoisted_5 = {
+const _hoisted_1 = { class: "nut-infinite__container" };
+const _hoisted_2 = { class: "nut-infinite__bottom" };
+const _hoisted_3 = {
   key: 0,
-  class: "bottom-box"
+  class: "nut-infinite__bottom-box"
 };
-const _hoisted_6 = { class: "bottom-text" };
-const _hoisted_7 = { class: "tips" };
+const _hoisted_4 = { class: "nut-infinite__bottom-box__text" };
+const _hoisted_5 = { class: "nut-infinite__bottom-tips" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_nut_icon = resolveComponent("nut-icon");
+  const _component_Loading = resolveComponent("Loading");
   return openBlock(), createElementBlock("view", {
     class: normalizeClass(_ctx.classes),
-    ref: "scroller",
-    onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.touchStart && _ctx.touchStart(...args)),
-    onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.touchMove && _ctx.touchMove(...args)),
-    onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.touchEnd && _ctx.touchEnd(...args))
+    ref: "scroller"
   }, [
-    createElementVNode("view", {
-      class: "nut-infinite-top",
-      ref: "refreshTop",
-      style: normalizeStyle(_ctx.getStyle)
-    }, [
-      createElementVNode("view", _hoisted_1, [
-        createVNode(_component_nut_icon, mergeProps({ class: "top-img" }, _ctx.$attrs, { name: _ctx.pullIcon }), null, 16, ["name"]),
-        createElementVNode("view", _hoisted_2, toDisplayString(_ctx.pullTxt || _ctx.translate("pullTxt")), 1)
-      ])
-    ], 4),
-    createElementVNode("view", _hoisted_3, [
+    createElementVNode("view", _hoisted_1, [
       renderSlot(_ctx.$slots, "default")
     ]),
-    createElementVNode("view", _hoisted_4, [
-      _ctx.isInfiniting ? (openBlock(), createElementBlock("view", _hoisted_5, [
+    createElementVNode("view", _hoisted_2, [
+      _ctx.isInfiniting ? (openBlock(), createElementBlock("view", _hoisted_3, [
         renderSlot(_ctx.$slots, "loading", {}, () => [
-          createVNode(_component_nut_icon, mergeProps({ class: "bottom-img" }, _ctx.$attrs, { name: _ctx.loadIcon }), null, 16, ["name"]),
-          createElementVNode("view", _hoisted_6, toDisplayString(_ctx.loadTxt || _ctx.translate("loading")), 1)
+          renderSlot(_ctx.$slots, "loadIcon", {}, () => [
+            createVNode(_component_Loading, { class: "nut-icon-loading nut-infinite__bottom-box__img" })
+          ]),
+          createElementVNode("view", _hoisted_4, toDisplayString(_ctx.loadTxt || _ctx.translate("loading")), 1)
         ])
       ])) : !_ctx.hasMore ? renderSlot(_ctx.$slots, "finished", { key: 1 }, () => [
-        createElementVNode("view", _hoisted_7, toDisplayString(_ctx.loadMoreTxt || _ctx.translate("loadMoreTxt")), 1)
+        createElementVNode("view", _hoisted_5, toDisplayString(_ctx.loadMoreTxt || _ctx.translate("loadMoreTxt")), 1)
       ]) : createCommentVNode("", true)
     ])
-  ], 34);
+  ], 2);
 }
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index as default };
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/dist/packages/_es/Input.js

@@ -1,11 +1,12 @@
 /*!
-* @nutui/nutui v3.3.1 Fri Dec 16 2022 17:34:28 GMT+0800 (中国标准时间)
+* @nutui/nutui v4.0.0-beta.1 Mon Dec 26 2022 15:40:58 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { ref, reactive, computed, watch, onMounted, h, resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, mergeProps, createCommentVNode, normalizeStyle, createElementVNode, toDisplayString, renderSlot, createBlock, resolveDynamicComponent, withDirectives, vShow, createTextVNode } from "vue";
-import { c as createComponent } from "./component.js";
-import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import { ref, reactive, computed, watch, onMounted, h, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, resolveDynamicComponent, normalizeStyle, toDisplayString, createTextVNode, createCommentVNode, withDirectives, renderSlot, createVNode, mergeProps, vShow } from "vue";
+import { c as createComponent } from "./component-48526d37.js";
+import { MaskClose } from "@nutui/icons-vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-73a3d722.js";
 import "../locale/lang";
 function trimExtraChar(value, char, regExp) {
   const index2 = value.indexOf(char);
@@ -50,26 +51,6 @@ const _sfc_main = create({
       type: String,
       default: ""
     },
-    label: {
-      type: String,
-      default: ""
-    },
-    labelClass: {
-      type: String,
-      default: ""
-    },
-    labelWidth: {
-      type: [String, Number],
-      default: "80"
-    },
-    labelAlign: {
-      type: String,
-      default: "left"
-    },
-    colon: {
-      type: Boolean,
-      default: false
-    },
     inputAlign: {
       type: String,
       default: "left"
@@ -90,38 +71,14 @@ const _sfc_main = create({
       type: Boolean,
       default: false
     },
-    error: {
-      type: Boolean,
-      default: false
-    },
     maxLength: {
       type: [String, Number],
       default: "9999"
     },
-    leftIcon: {
-      type: String,
-      default: ""
-    },
-    leftIconSize: {
-      type: [String, Number],
-      default: ""
-    },
-    rightIcon: {
-      type: String,
-      default: ""
-    },
-    rightIconSize: {
-      type: [String, Number],
-      default: ""
-    },
     clearable: {
       type: Boolean,
       default: false
     },
-    clearIcon: {
-      type: String,
-      default: "mask-close"
-    },
     clearSize: {
       type: [String, Number],
       default: "14"
@@ -142,14 +99,6 @@ const _sfc_main = create({
       type: Array,
       default: []
     },
-    errorMessage: {
-      type: String,
-      default: ""
-    },
-    errorMessageAlign: {
-      type: String,
-      default: ""
-    },
     rows: {
       type: [String, Number],
       default: null
@@ -165,29 +114,21 @@ const _sfc_main = create({
     confirmType: {
       type: String,
       default: "done"
+    },
+    error: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: [
-    "update:modelValue",
-    "change",
-    "blur",
-    "focus",
-    "clear",
-    "keypress",
-    "click-input",
-    "click-left-icon",
-    "click-right-icon"
-  ],
+  components: { MaskClose },
+  emits: ["update:modelValue", "change", "blur", "focus", "clear", "keypress", "click-input"],
   setup(props, { emit, slots }) {
     const active = ref(false);
     const inputRef = ref();
-    const getModelValue = () => {
-      var _a;
-      return String((_a = props.modelValue) != null ? _a : "");
-    };
+    const getModelValue = () => String(props.modelValue ?? "");
     const renderInput = (type) => {
-      return h(type == "textarea" ? "textarea" : "input", {
-        style: type == "textarea" ? stylesTextarea : styles,
+      return h("input", {
+        style: styles,
         type: type != "textarea" && inputType(type)
       });
     };
@@ -201,10 +142,10 @@ const _sfc_main = create({
       return {
         [prefixCls]: true,
         center: props.center,
-        [`${prefixCls}-disabled`]: props.disabled,
-        [`${prefixCls}-required`]: props.required,
-        [`${prefixCls}-error`]: props.error,
-        [`${prefixCls}-border`]: props.border
+        [`${prefixCls}--disabled`]: props.disabled,
+        [`${prefixCls}--required`]: props.required,
+        [`${prefixCls}--error`]: props.error,
+        [`${prefixCls}--border`]: props.border
       };
     });
     const styles = computed(() => {
@@ -212,12 +153,6 @@ const _sfc_main = create({
         textAlign: props.inputAlign
       };
     });
-    const stylesTextarea = computed(() => {
-      return {
-        textAlign: props.inputAlign,
-        height: Number(props.rows) * 24 + "px"
-      };
-    });
     const inputType = (type) => {
       if (type === "number") {
         return "text";
@@ -284,6 +219,8 @@ const _sfc_main = create({
       event.stopPropagation();
       if (props.disabled)
         return;
+      emit("update:modelValue", "", event);
+      emit("change", "", event);
       emit("clear", "", event);
     };
     const resetValidation = () => {
@@ -298,33 +235,15 @@ const _sfc_main = create({
       }
       emit("click-input", event);
     };
-    const onClickLeftIcon = (event) => {
-      event.stopPropagation();
-      if (props.disabled) {
-        return;
-      }
-      emit("click-left-icon", event);
-    };
-    const onClickRightIcon = (event) => {
-      event.stopPropagation();
-      if (props.disabled) {
-        return;
-      }
-      emit("click-right-icon", event);
-    };
     watch(
       () => props.modelValue,
       () => {
-        if (!slots.input) {
-          updateValue(getModelValue());
-          resetValidation();
-        }
+        updateValue(getModelValue());
+        resetValidation();
       }
     );
     onMounted(() => {
-      if (!slots.input) {
-        updateValue(getModelValue(), props.formatTrigger);
-      }
+      updateValue(getModelValue(), props.formatTrigger);
     });
     return {
       renderInput,
@@ -332,67 +251,35 @@ const _sfc_main = create({
       active,
       classes,
       styles,
-      stylesTextarea,
       inputType,
       onInput,
       onFocus,
       onBlur,
       clear,
-      onClickInput,
-      onClickLeftIcon,
-      onClickRightIcon
+      onClickInput
     };
   }
 });
-const _hoisted_1 = { class: "label-string" };
-const _hoisted_2 = {
-  key: 2,
-  class: "nut-input-value"
-};
-const _hoisted_3 = {
-  key: 3,
-  class: "nut-input-value"
-};
-const _hoisted_4 = { class: "nut-input-inner" };
-const _hoisted_5 = { class: "nut-input-box" };
-const _hoisted_6 = { class: "nut-input-clear-box" };
-const _hoisted_7 = {
+const _hoisted_1 = { class: "nut-input-value" };
+const _hoisted_2 = { class: "nut-input-inner" };
+const _hoisted_3 = { class: "nut-input-box" };
+const _hoisted_4 = {
   key: 0,
   class: "nut-input-word-limit"
 };
-const _hoisted_8 = { class: "nut-input-word-num" };
+const _hoisted_5 = { class: "nut-input-word-num" };
+const _hoisted_6 = {
+  key: 0,
+  class: "nut-input-clear-box"
+};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_nut_icon = resolveComponent("nut-icon");
+  const _component_MaskClose = resolveComponent("MaskClose");
   return openBlock(), createElementBlock("view", {
     class: normalizeClass(_ctx.classes)
   }, [
-    _ctx.leftIcon && _ctx.leftIcon.length > 0 ? (openBlock(), createElementBlock("view", {
-      key: 0,
-      class: "nut-input-left-icon",
-      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClickLeftIcon && _ctx.onClickLeftIcon(...args))
-    }, [
-      createVNode(_component_nut_icon, mergeProps({ name: _ctx.leftIcon }, _ctx.$attrs, { size: _ctx.leftIconSize }), null, 16, ["name", "size"])
-    ])) : createCommentVNode("", true),
-    _ctx.label ? (openBlock(), createElementBlock("view", {
-      key: 1,
-      class: normalizeClass(["nut-input-label", _ctx.labelClass]),
-      style: normalizeStyle({
-        width: `${_ctx.labelWidth}px`,
-        textAlign: _ctx.labelAlign
-      })
-    }, [
-      createElementVNode("view", _hoisted_1, toDisplayString(_ctx.label) + " " + toDisplayString(_ctx.colon ? ":" : ""), 1)
-    ], 6)) : createCommentVNode("", true),
-    _ctx.$slots.input ? (openBlock(), createElementBlock("view", _hoisted_2, [
-      createElementVNode("view", {
-        class: "nut-input-inner",
-        onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onClickInput && _ctx.onClickInput(...args))
-      }, [
-        renderSlot(_ctx.$slots, "input")
-      ])
-    ])) : (openBlock(), createElementBlock("view", _hoisted_3, [
-      createElementVNode("view", _hoisted_4, [
-        createElementVNode("view", _hoisted_5, [
+    createElementVNode("view", _hoisted_1, [
+      createElementVNode("view", _hoisted_2, [
+        createElementVNode("view", _hoisted_3, [
           (openBlock(), createBlock(resolveDynamicComponent(_ctx.renderInput(_ctx.type)), {
             class: "input-text",
             ref: "inputRef",
@@ -409,46 +296,27 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             onFocus: _ctx.onFocus,
             onBlur: _ctx.onBlur,
             onClick: _ctx.onClickInput
-          }, null, 40, ["style", "maxlength", "placeholder", "disabled", "readonly", "value", "formatTrigger", "autofocus", "enterkeyhint", "onInput", "onFocus", "onBlur", "onClick"]))
-        ]),
-        createElementVNode("view", _hoisted_6, [
-          _ctx.clearable && !_ctx.readonly ? withDirectives((openBlock(), createBlock(_component_nut_icon, mergeProps({
-            key: 0,
-            class: "nut-input-clear",
-            name: _ctx.clearIcon
-          }, _ctx.$attrs, {
-            size: _ctx.clearSize,
-            onClick: _ctx.clear
-          }), null, 16, ["name", "size", "onClick"])), [
-            [vShow, _ctx.active && _ctx.modelValue.length > 0]
-          ]) : createCommentVNode("", true)
+          }, null, 40, ["style", "maxlength", "placeholder", "disabled", "readonly", "value", "formatTrigger", "autofocus", "enterkeyhint", "onInput", "onFocus", "onBlur", "onClick"])),
+          _ctx.showWordLimit && _ctx.maxLength ? (openBlock(), createElementBlock("view", _hoisted_4, [
+            createElementVNode("span", _hoisted_5, toDisplayString(_ctx.modelValue ? _ctx.modelValue.length : 0), 1),
+            createTextVNode("/" + toDisplayString(_ctx.maxLength), 1)
+          ])) : createCommentVNode("", true)
         ]),
-        _ctx.rightIcon && _ctx.rightIcon.length > 0 ? (openBlock(), createElementBlock("view", {
-          key: 0,
-          class: "nut-input-right-icon",
-          onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onClickRightIcon && _ctx.onClickRightIcon(...args))
-        }, [
-          createVNode(_component_nut_icon, mergeProps({ name: _ctx.rightIcon }, _ctx.$attrs, { size: _ctx.rightIconSize }), null, 16, ["name", "size"])
-        ])) : createCommentVNode("", true),
-        _ctx.$slots.button ? renderSlot(_ctx.$slots, "button", {
-          key: 1,
-          class: "nut-input-button"
-        }) : createCommentVNode("", true),
-        _ctx.$slots.rightExtra ? renderSlot(_ctx.$slots, "rightExtra", { key: 2 }) : createCommentVNode("", true)
-      ]),
-      _ctx.showWordLimit && _ctx.maxLength ? (openBlock(), createElementBlock("view", _hoisted_7, [
-        createElementVNode("span", _hoisted_8, toDisplayString(_ctx.modelValue ? _ctx.modelValue.length : 0), 1),
-        createTextVNode("/" + toDisplayString(_ctx.maxLength), 1)
-      ])) : createCommentVNode("", true),
-      _ctx.errorMessage ? (openBlock(), createElementBlock("view", {
-        key: 1,
-        class: "nut-input-error-message",
-        style: normalizeStyle({
-          textAlign: _ctx.errorMessageAlign
-        })
-      }, toDisplayString(_ctx.errorMessage), 5)) : createCommentVNode("", true)
-    ]))
+        _ctx.clearable && !_ctx.readonly ? withDirectives((openBlock(), createElementBlock("view", _hoisted_6, [
+          renderSlot(_ctx.$slots, "clear", {}, () => [
+            createVNode(_component_MaskClose, mergeProps({ class: "nut-input-clear" }, _ctx.$attrs, {
+              size: _ctx.clearSize,
+              onClick: _ctx.clear
+            }), null, 16, ["size", "onClick"])
+          ])
+        ], 512)), [
+          [vShow, _ctx.active && _ctx.modelValue.length > 0]
+        ]) : createCommentVNode("", true)
+      ])
+    ])
   ], 2);
 }
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index as default };
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};