@nutui/nutui 3.1.22-beta.5 → 3.1.23-beta.1

package/dist/packages/_es/Rate.js

@@ -1,42 +1,198 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { c as e } from "./component.js";
-import { ref as o, computed as a, resolveComponent as t, openBlock as l, createElementBlock as n, normalizeClass as c, Fragment as i, renderList as r, normalizeStyle as s, createVNode as u, createBlock as f, createCommentVNode as m } from "vue";
-import { p as d } from "./pxCheck.js";
-import { u as p } from "./index4.js";
-import { _ as h } from "./plugin-vue_export-helper.js";
+import { c as createComponent } from "./component.js";
+import { ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, normalizeStyle, createVNode, createBlock, createCommentVNode } from "vue";
+import { p as pxCheck } from "./pxCheck.js";
+import { u as useTouch } from "./index4.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const { componentName: C } = e("rate"), k = ((e2 = true) => ({ props: { count: { type: [String, Number], default: 5 }, modelValue: { type: [String, Number], default: 0 }, iconSize: { type: [String, Number], default: 18 }, activeColor: { type: String, default: "" }, voidColor: { type: String, default: "" }, uncheckedIcon: { type: String, default: "star-n" }, checkedIcon: { type: String, default: "star-fill-n" }, readonly: { type: Boolean, default: false }, disabled: { type: Boolean, default: false }, allowHalf: { type: Boolean, default: false }, touchable: { type: Boolean, default: true }, spacing: { type: [String, Number], default: 14 }, classPrefix: { type: String, default: "nut-icon" }, fontClassName: { type: String, default: "nutui-iconfont" } }, emits: ["update:modelValue", "change"], setup(t2, { emit: l2 }) {
-  const n2 = o([]), c2 = a(() => ({ [C]: true })), i2 = (e3) => {
-    l2("update:modelValue", e3), l2("change", e3);
-  }, r2 = p(), s2 = { onTouchStart(e3) {
-    t2.touchable && r2.start(e3);
-  }, onTouchMove(o2) {
-    t2.touchable && e2 && (r2.move(o2), r2.isHorizontal() && n2.value && (o2.preventDefault(), i2(((e3, o3, a2) => {
-      let t3 = 0;
-      for (let l3 = o3.value.length - 1; l3 >= 0; l3--) {
-        const n3 = o3.value[l3];
-        if (e3 > n3.offsetLeft) {
-          t3 = a2 ? l3 + (e3 > n3.offsetLeft + n3.clientWidth / 2 ? 1 : 0.5) : l3 + 1;
-          break;
-        }
+const { componentName } = createComponent("rate");
+const useComponent = (touchable = true) => {
+  return {
+    props: {
+      count: {
+        type: [String, Number],
+        default: 5
+      },
+      modelValue: {
+        type: [String, Number],
+        default: 0
+      },
+      iconSize: {
+        type: [String, Number],
+        default: 18
+      },
+      activeColor: {
+        type: String,
+        default: ""
+      },
+      voidColor: {
+        type: String,
+        default: ""
+      },
+      uncheckedIcon: {
+        type: String,
+        default: "star-n"
+      },
+      checkedIcon: {
+        type: String,
+        default: "star-fill-n"
+      },
+      readonly: {
+        type: Boolean,
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      allowHalf: {
+        type: Boolean,
+        default: false
+      },
+      touchable: {
+        type: Boolean,
+        default: true
+      },
+      spacing: {
+        type: [String, Number],
+        default: 14
+      },
+      classPrefix: {
+        type: String,
+        default: "nut-icon"
+      },
+      fontClassName: {
+        type: String,
+        default: "nutui-iconfont"
       }
-      return t3;
-    })(r2.moveX.value, n2, t2.allowHalf))));
-  } }, u2 = Math.random().toString(36).slice(-8);
-  return { classes: c2, ...s2, onClick: (e3, o2) => {
-    if (t2.disabled || t2.readonly)
-      return;
-    let a2 = 0;
-    o2 === 1 && t2.modelValue === o2 || (a2 = o2, t2.allowHalf && e3 == 2 && (a2 -= 0.5)), i2(a2);
-  }, pxCheck: d, rateRefs: n2, refRandomId: u2 };
-} }))(), v = ["id"];
-const { create: g } = e("rate");
-var y = h(g(k), [["render", function(e2, o2, a2, d2, p2, h2) {
-  const C2 = t("nut-icon");
-  return l(), n("view", { class: c(e2.classes), onTouchstart: o2[0] || (o2[0] = (...o3) => e2.onTouchStart && e2.onTouchStart(...o3)), onTouchmove: o2[1] || (o2[1] = (...o3) => e2.onTouchMove && e2.onTouchMove(...o3)) }, [(l(true), n(i, null, r(Number(e2.count), (o3) => (l(), n("view", { class: "nut-rate-item", key: o3, ref: "rateRefs", id: "rateRefs-" + e2.refRandomId + o3, style: s({ marginRight: e2.pxCheck(e2.spacing) }) }, [u(C2, { size: e2.iconSize, class: c(["nut-rate-item__icon", { "nut-rate-item__icon--disabled": e2.disabled || o3 > e2.modelValue }]), onClick: (a3) => e2.onClick(1, o3), color: o3 <= e2.modelValue ? e2.activeColor : e2.voidColor, "font-class-name": e2.fontClassName, "class-prefix": e2.classPrefix, name: o3 <= e2.modelValue ? e2.checkedIcon : e2.uncheckedIcon }, null, 8, ["size", "onClick", "class", "color", "font-class-name", "class-prefix", "name"]), e2.allowHalf && Number(e2.modelValue) + 1 > o3 ? (l(), f(C2, { key: 0, class: "nut-rate-item__icon nut-rate-item__icon--half", onClick: (a3) => e2.onClick(2, o3), "font-class-name": e2.fontClassName, "class-prefix": e2.classPrefix, color: o3 <= Number(e2.modelValue) + 1 ? e2.activeColor : e2.voidColor, size: e2.iconSize, name: e2.checkedIcon }, null, 8, ["onClick", "font-class-name", "class-prefix", "color", "size", "name"])) : e2.allowHalf && Number(e2.modelValue) + 1 < o3 ? (l(), f(C2, { key: 1, class: "nut-rate-item__icon nut-rate-item__icon--disabled nut-rate-item__icon--half", onClick: (a3) => e2.onClick(2, o3), "font-class-name": e2.fontClassName, "class-prefix": e2.classPrefix, color: e2.voidColor, size: e2.iconSize, name: e2.uncheckedIcon }, null, 8, ["onClick", "font-class-name", "class-prefix", "color", "size", "name"])) : m("", true)], 12, v))), 128))], 34);
-}]]);
-export { y as default };
+    },
+    emits: ["update:modelValue", "change"],
+    setup(props, { emit }) {
+      const rateRefs = ref([]);
+      const classes = computed(() => {
+        const prefixCls = componentName;
+        return {
+          [prefixCls]: true
+        };
+      });
+      const updateVal = (value) => {
+        emit("update:modelValue", value);
+        emit("change", value);
+      };
+      const onClick = (e, index2) => {
+        if (props.disabled || props.readonly)
+          return;
+        let value = 0;
+        if (index2 === 1 && props.modelValue === index2)
+          ;
+        else {
+          value = index2;
+          if (props.allowHalf && e == 2) {
+            value -= 0.5;
+          }
+        }
+        updateVal(value);
+      };
+      const getScoreByPosition = (x, rateRefs2, allowHalf) => {
+        let v = 0;
+        for (let index2 = rateRefs2.value.length - 1; index2 >= 0; index2--) {
+          const item = rateRefs2.value[index2];
+          if (x > item.offsetLeft) {
+            if (allowHalf) {
+              v = index2 + (x > item.offsetLeft + item.clientWidth / 2 ? 1 : 0.5);
+            } else {
+              v = index2 + 1;
+            }
+            break;
+          }
+        }
+        return v;
+      };
+      const touch = useTouch();
+      const touchMethods = {
+        onTouchStart(event) {
+          if (!props.touchable)
+            return;
+          touch.start(event);
+        },
+        onTouchMove(event) {
+          if (!props.touchable || !touchable)
+            return;
+          touch.move(event);
+          if (touch.isHorizontal()) {
+            if (rateRefs.value) {
+              event.preventDefault();
+              updateVal(getScoreByPosition(touch.moveX.value, rateRefs, props.allowHalf));
+            }
+          }
+        }
+      };
+      const refRandomId = Math.random().toString(36).slice(-8);
+      return {
+        classes,
+        ...touchMethods,
+        onClick,
+        pxCheck,
+        rateRefs,
+        refRandomId
+      };
+    }
+  };
+};
+const component = useComponent();
+const _hoisted_1 = ["id"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.onTouchStart && _ctx.onTouchStart(...args)),
+    onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.onTouchMove && _ctx.onTouchMove(...args))
+  }, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList(Number(_ctx.count), (n) => {
+      return openBlock(), createElementBlock("view", {
+        class: "nut-rate-item",
+        key: n,
+        ref: "rateRefs",
+        id: "rateRefs-" + _ctx.refRandomId + n,
+        style: normalizeStyle({ marginRight: _ctx.pxCheck(_ctx.spacing) })
+      }, [
+        createVNode(_component_nut_icon, {
+          size: _ctx.iconSize,
+          class: normalizeClass(["nut-rate-item__icon", { "nut-rate-item__icon--disabled": _ctx.disabled || n > _ctx.modelValue }]),
+          onClick: ($event) => _ctx.onClick(1, n),
+          color: n <= _ctx.modelValue ? _ctx.activeColor : _ctx.voidColor,
+          "font-class-name": _ctx.fontClassName,
+          "class-prefix": _ctx.classPrefix,
+          name: n <= _ctx.modelValue ? _ctx.checkedIcon : _ctx.uncheckedIcon
+        }, null, 8, ["size", "onClick", "class", "color", "font-class-name", "class-prefix", "name"]),
+        _ctx.allowHalf && Number(_ctx.modelValue) + 1 > n ? (openBlock(), createBlock(_component_nut_icon, {
+          key: 0,
+          class: "nut-rate-item__icon nut-rate-item__icon--half",
+          onClick: ($event) => _ctx.onClick(2, n),
+          "font-class-name": _ctx.fontClassName,
+          "class-prefix": _ctx.classPrefix,
+          color: n <= Number(_ctx.modelValue) + 1 ? _ctx.activeColor : _ctx.voidColor,
+          size: _ctx.iconSize,
+          name: _ctx.checkedIcon
+        }, null, 8, ["onClick", "font-class-name", "class-prefix", "color", "size", "name"])) : _ctx.allowHalf && Number(_ctx.modelValue) + 1 < n ? (openBlock(), createBlock(_component_nut_icon, {
+          key: 1,
+          class: "nut-rate-item__icon nut-rate-item__icon--disabled nut-rate-item__icon--half",
+          onClick: ($event) => _ctx.onClick(2, n),
+          "font-class-name": _ctx.fontClassName,
+          "class-prefix": _ctx.classPrefix,
+          color: _ctx.voidColor,
+          size: _ctx.iconSize,
+          name: _ctx.uncheckedIcon
+        }, null, 8, ["onClick", "font-class-name", "class-prefix", "color", "size", "name"])) : createCommentVNode("", true)
+      ], 12, _hoisted_1);
+    }), 128))
+  ], 34);
+}
+const { create } = createComponent("rate");
+const _sfc_main = create(component);
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", render]]);
+export { index as default };

package/dist/packages/_es/Row.js

@@ -1,27 +1,69 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { provide as t, openBlock as e, createElementBlock as r, normalizeClass as n, renderSlot as l } from "vue";
-import { c as a } from "./component.js";
-import { _ as o } from "./plugin-vue_export-helper.js";
+import { provide, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const { componentName: i, create: s } = a("row");
-var p = o(s({ props: { type: { type: String, default: "" }, gutter: { type: [String, Number], default: "" }, justify: { type: String, default: "start" }, align: { type: String, default: "flex-start" }, flexWrap: { type: String, default: "nowrap" } }, emits: ["click"], setup(e2, { emit: r2 }) {
-  const n2 = i;
-  t("gutter", e2.gutter);
-  const l2 = (t2, e3) => t2 ? e3 ? `nut-row-${t2}-${e3}` : "" : `nut-row-${e3}`;
-  return { getClasses: () => `
-              ${l2("", e2.type)}
-              ${l2("justify", e2.justify)}
-              ${l2("align", e2.align)}
-              ${l2("flex", e2.flexWrap)}
-              ${n2}
-              `, handleClick: (t2) => {
-    t2.stopPropagation(), r2("click", t2);
-  } };
-} }), [["render", function(t2, a2, o2, i2, s2, p2) {
-  return e(), r("view", { class: n(t2.getClasses()), onClick: a2[0] || (a2[0] = (...e2) => t2.handleClick && t2.handleClick(...e2)) }, [l(t2.$slots, "default")], 2);
-}]]);
-export { p as default };
+const { componentName, create } = createComponent("row");
+const _sfc_main = create({
+  props: {
+    type: {
+      type: String,
+      default: ""
+    },
+    gutter: {
+      type: [String, Number],
+      default: ""
+    },
+    justify: {
+      type: String,
+      default: "start"
+    },
+    align: {
+      type: String,
+      default: "flex-start"
+    },
+    flexWrap: {
+      type: String,
+      default: "nowrap"
+    }
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    const prefixCls = componentName;
+    provide("gutter", props.gutter);
+    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 handleClick = (evt) => {
+      evt.stopPropagation();
+      emit("click", evt);
+    };
+    return {
+      getClasses,
+      handleClick
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.getClasses()),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/SearchBar.js

@@ -1,42 +1,243 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { reactive as e, computed as a, ref as l, onMounted as t, toRefs as r, resolveComponent as n, openBlock as c, createElementBlock as u, normalizeStyle as i, toDisplayString as o, createCommentVNode as s, renderSlot as h, createElementVNode as p, withModifiers as d, withDirectives as g, createVNode as b, vShow as m } from "vue";
-import { c as f } from "./component.js";
-import { _ as y } from "./plugin-vue_export-helper.js";
+import { reactive, computed, ref, onMounted, toRefs, resolveComponent, openBlock, createElementBlock, normalizeStyle, toDisplayString, createCommentVNode, renderSlot, createElementVNode, withModifiers, withDirectives, createVNode, vShow } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const { create: k, translate: v } = f("searchbar"), _ = k({ props: { modelValue: { type: [String, Number], default: "" }, inputType: { type: String, default: "textarea" }, label: { type: String, default: "" }, maxLength: { type: [String, Number], default: "9999" }, placeholder: { type: String, default: "" }, clearable: { type: Boolean, default: true }, background: { type: String, default: "" }, inputBackground: { type: String, default: "" }, autofocus: { type: Boolean, default: false }, disabled: { type: Boolean, default: false }, readonly: { type: Boolean, default: false }, inputAlign: { type: String, default: "left" } }, emits: ["change", "update:modelValue", "blur", "focus", "clear", "search", "click-input", "click-left-icon", "click-right-icon"], setup(n2, { emit: c2 }) {
-  const u2 = e({ active: false }), i2 = a(() => ({ background: n2.background })), o2 = a(() => ({ background: n2.inputBackground })), s2 = a(() => ({ "text-align": n2.inputAlign })), h2 = l(null);
-  return t(() => {
-    n2.autofocus && h2.value.focus();
-  }), { inputsearch: h2, ...r(u2), valueChange: (e2) => {
-    let a2 = e2.target.value;
-    n2.maxLength && a2.length > Number(n2.maxLength) && (a2 = a2.slice(0, Number(n2.maxLength))), c2("update:modelValue", a2, e2), c2("change", a2, e2);
-  }, valueFocus: (e2) => {
-    let a2 = e2.target.value;
-    u2.active = true, c2("focus", a2, e2);
-  }, valueBlur: (e2) => {
-    setTimeout(() => {
-      u2.active = false;
-    }, 0);
-    let a2 = e2.target.value;
-    n2.maxLength && a2.length > Number(n2.maxLength) && (a2 = a2.slice(0, Number(n2.maxLength))), c2("blur", a2, e2);
-  }, handleClear: (e2) => {
-    c2("update:modelValue", "", e2), c2("change", "", e2), c2("clear", "");
-  }, handleSubmit: () => {
-    c2("search", n2.modelValue);
-  }, searchbarStyle: i2, inputSearchbarStyle: o2, translate: v, clickInput: (e2) => {
-    c2("click-input", e2);
-  }, leftIconClick: (e2) => {
-    c2("click-left-icon", n2.modelValue, e2);
-  }, rightIconClick: (e2) => {
-    c2("click-right-icon", n2.modelValue, e2);
-  }, styleSearchbar: s2 };
-} }), S = { key: 0, class: "nut-searchbar__search-label" }, C = { key: 1, class: "nut-searchbar__search-icon nut-searchbar__left-search-icon" }, x = { class: "nut-searchbar__input-inner" }, B = ["type", "maxlength", "placeholder", "value", "disabled", "readonly"], I = { key: 2, class: "nut-searchbar__search-icon nut-searchbar__right-search-icon" };
-var V = y(_, [["render", function(e2, a2, l2, t2, r2, f2) {
-  const y2 = n("nut-icon");
-  return c(), u("view", { class: "nut-searchbar", style: i(e2.searchbarStyle) }, [e2.label ? (c(), u("span", S, o(e2.label), 1)) : s("", true), e2.$slots.leftout ? (c(), u("view", C, [h(e2.$slots, "leftout")])) : s("", true), p("view", { class: "nut-searchbar__search-input", style: i(e2.inputSearchbarStyle) }, [e2.$slots.leftin ? (c(), u("view", { key: 0, class: "nut-searchbar__search-icon nut-searchbar__iptleft-search-icon", onClick: a2[0] || (a2[0] = (...a3) => e2.leftIconClick && e2.leftIconClick(...a3)) }, [h(e2.$slots, "leftin")])) : s("", true), p("view", x, [p("form", { action: "#", onSubmit: a2[5] || (a2[5] = d((...a3) => e2.handleSubmit && e2.handleSubmit(...a3), ["prevent"])) }, [p("input", { ref: "inputsearch", class: "nut-searchbar__input-bar", type: e2.inputType, maxlength: e2.maxLength, placeholder: e2.placeholder || e2.translate("placeholder"), value: e2.modelValue, disabled: e2.disabled, readonly: e2.readonly, onClick: a2[1] || (a2[1] = (...a3) => e2.clickInput && e2.clickInput(...a3)), onInput: a2[2] || (a2[2] = (...a3) => e2.valueChange && e2.valueChange(...a3)), onFocus: a2[3] || (a2[3] = (...a3) => e2.valueFocus && e2.valueFocus(...a3)), onBlur: a2[4] || (a2[4] = (...a3) => e2.valueBlur && e2.valueBlur(...a3)), style: i(e2.styleSearchbar) }, null, 44, B)], 32), e2.clearable ? g((c(), u("view", { key: 0, onClick: a2[6] || (a2[6] = (...a3) => e2.handleClear && e2.handleClear(...a3)), class: "nut-searchbar__input-clear" }, [b(y2, { name: "circle-close", size: "12", color: "#555" })], 512)), [[m, e2.modelValue.length > 0]]) : s("", true)]), e2.$slots.rightin ? (c(), u("view", { key: 1, class: "nut-searchbar__search-icon nut-searchbar__iptright-sarch-icon", onClick: a2[7] || (a2[7] = (...a3) => e2.rightIconClick && e2.rightIconClick(...a3)) }, [h(e2.$slots, "rightin")])) : s("", true)], 4), e2.$slots.rightout ? (c(), u("view", I, [h(e2.$slots, "rightout")])) : s("", true)], 4);
-}]]);
-export { V as default };
+const { create, translate } = createComponent("searchbar");
+const _sfc_main = create({
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: ""
+    },
+    inputType: {
+      type: String,
+      default: "textarea"
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    maxLength: {
+      type: [String, Number],
+      default: "9999"
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    background: {
+      type: String,
+      default: ""
+    },
+    inputBackground: {
+      type: String,
+      default: ""
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    inputAlign: {
+      type: String,
+      default: "left"
+    }
+  },
+  emits: [
+    "change",
+    "update:modelValue",
+    "blur",
+    "focus",
+    "clear",
+    "search",
+    "click-input",
+    "click-left-icon",
+    "click-right-icon"
+  ],
+  setup(props, { emit }) {
+    const state = reactive({
+      active: false
+    });
+    const searchbarStyle = computed(() => {
+      return {
+        background: props.background
+      };
+    });
+    const inputSearchbarStyle = computed(() => {
+      return {
+        background: props.inputBackground
+      };
+    });
+    const valueChange = (event) => {
+      const input = event.target;
+      let val = input.value;
+      if (props.maxLength && val.length > Number(props.maxLength)) {
+        val = val.slice(0, Number(props.maxLength));
+      }
+      emit("update:modelValue", val, event);
+      emit("change", val, event);
+    };
+    const valueFocus = (event) => {
+      const input = event.target;
+      let value = input.value;
+      state.active = true;
+      emit("focus", value, event);
+    };
+    const valueBlur = (event) => {
+      setTimeout(() => {
+        state.active = false;
+      }, 0);
+      const input = event.target;
+      let value = input.value;
+      if (props.maxLength && value.length > Number(props.maxLength)) {
+        value = value.slice(0, Number(props.maxLength));
+      }
+      emit("blur", value, event);
+    };
+    const handleClear = (event) => {
+      emit("update:modelValue", "", event);
+      emit("change", "", event);
+      emit("clear", "");
+    };
+    const handleSubmit = () => {
+      emit("search", props.modelValue);
+    };
+    const clickInput = (event) => {
+      emit("click-input", event);
+    };
+    const leftIconClick = (event) => {
+      emit("click-left-icon", props.modelValue, event);
+    };
+    const rightIconClick = (event) => {
+      emit("click-right-icon", props.modelValue, event);
+    };
+    const styleSearchbar = computed(() => {
+      return {
+        "text-align": props.inputAlign
+      };
+    });
+    const inputsearch = ref(null);
+    onMounted(() => {
+      if (props.autofocus) {
+        inputsearch.value.focus();
+      }
+    });
+    return {
+      inputsearch,
+      ...toRefs(state),
+      valueChange,
+      valueFocus,
+      valueBlur,
+      handleClear,
+      handleSubmit,
+      searchbarStyle,
+      inputSearchbarStyle,
+      translate,
+      clickInput,
+      leftIconClick,
+      rightIconClick,
+      styleSearchbar
+    };
+  }
+});
+const _hoisted_1 = {
+  key: 0,
+  class: "nut-searchbar__search-label"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "nut-searchbar__search-icon nut-searchbar__left-search-icon"
+};
+const _hoisted_3 = { class: "nut-searchbar__input-inner" };
+const _hoisted_4 = ["type", "maxlength", "placeholder", "value", "disabled", "readonly"];
+const _hoisted_5 = {
+  key: 2,
+  class: "nut-searchbar__search-icon nut-searchbar__right-search-icon"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  return openBlock(), createElementBlock("view", {
+    class: "nut-searchbar",
+    style: normalizeStyle(_ctx.searchbarStyle)
+  }, [
+    _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
+    _ctx.$slots.leftout ? (openBlock(), createElementBlock("view", _hoisted_2, [
+      renderSlot(_ctx.$slots, "leftout")
+    ])) : createCommentVNode("", true),
+    createElementVNode("view", {
+      class: "nut-searchbar__search-input",
+      style: normalizeStyle(_ctx.inputSearchbarStyle)
+    }, [
+      _ctx.$slots.leftin ? (openBlock(), createElementBlock("view", {
+        key: 0,
+        class: "nut-searchbar__search-icon nut-searchbar__iptleft-search-icon",
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.leftIconClick && _ctx.leftIconClick(...args))
+      }, [
+        renderSlot(_ctx.$slots, "leftin")
+      ])) : createCommentVNode("", true),
+      createElementVNode("view", _hoisted_3, [
+        createElementVNode("form", {
+          action: "#",
+          onSubmit: _cache[5] || (_cache[5] = withModifiers((...args) => _ctx.handleSubmit && _ctx.handleSubmit(...args), ["prevent"]))
+        }, [
+          createElementVNode("input", {
+            ref: "inputsearch",
+            class: "nut-searchbar__input-bar",
+            type: _ctx.inputType,
+            maxlength: _ctx.maxLength,
+            placeholder: _ctx.placeholder || _ctx.translate("placeholder"),
+            value: _ctx.modelValue,
+            disabled: _ctx.disabled,
+            readonly: _ctx.readonly,
+            onClick: _cache[1] || (_cache[1] = (...args) => _ctx.clickInput && _ctx.clickInput(...args)),
+            onInput: _cache[2] || (_cache[2] = (...args) => _ctx.valueChange && _ctx.valueChange(...args)),
+            onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.valueFocus && _ctx.valueFocus(...args)),
+            onBlur: _cache[4] || (_cache[4] = (...args) => _ctx.valueBlur && _ctx.valueBlur(...args)),
+            style: normalizeStyle(_ctx.styleSearchbar)
+          }, null, 44, _hoisted_4)
+        ], 32),
+        _ctx.clearable ? withDirectives((openBlock(), createElementBlock("view", {
+          key: 0,
+          onClick: _cache[6] || (_cache[6] = (...args) => _ctx.handleClear && _ctx.handleClear(...args)),
+          class: "nut-searchbar__input-clear"
+        }, [
+          createVNode(_component_nut_icon, {
+            name: "circle-close",
+            size: "12",
+            color: "#555"
+          })
+        ], 512)), [
+          [vShow, _ctx.modelValue.length > 0]
+        ]) : createCommentVNode("", true)
+      ]),
+      _ctx.$slots.rightin ? (openBlock(), createElementBlock("view", {
+        key: 1,
+        class: "nut-searchbar__search-icon nut-searchbar__iptright-sarch-icon",
+        onClick: _cache[7] || (_cache[7] = (...args) => _ctx.rightIconClick && _ctx.rightIconClick(...args))
+      }, [
+        renderSlot(_ctx.$slots, "rightin")
+      ])) : createCommentVNode("", true)
+    ], 4),
+    _ctx.$slots.rightout ? (openBlock(), createElementBlock("view", _hoisted_5, [
+      renderSlot(_ctx.$slots, "rightout")
+    ])) : createCommentVNode("", true)
+  ], 4);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };