mine-h5-ui/es/MeSearch/index.vue.js

一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍

import { defineComponent as V, useModel as B, openBlock as a, createElementBlock as f, normalizeStyle as b, createVNode as k, withDirectives as h, createElementVNode as v, unref as n, vModelText as M, Transition as T, withCtx as $, createBlock as S, createCommentVNode as x, toDisplayString as z, mergeModels as g } from "vue";
import { useSearch as N, useBtns as w } from "./hooks.js";
import p from "../MeIcon/index.vue.js";
const D = ["placeholder", "disabled"], U = /* @__PURE__ */ V({
  name: "MeSearch",
  __name: "index",
  props: /* @__PURE__ */ g({
    placeholder: { default: "请搜索" },
    btnText: { default: "" },
    align: { default: "left" },
    radius: { default: "4px" },
    background: { default: "" },
    color: { default: "" },
    disabled: { type: Boolean, default: !1 }
  }, {
    modelValue: {},
    modelModifiers: {}
  }),
  emits: /* @__PURE__ */ g(["click", "search", "focus", "blur", "input", "change"], ["update:modelValue"]),
  setup(t, { emit: y }) {
    const d = y, o = B(t, "modelValue"), { onKeypress: i, onFocus: r, onBlur: u, onInput: s, onChange: m } = N(d), { onClean: C, handleBtn: c } = w({ emit: d, inputVal: o });
    return (E, e) => (a(), f("div", {
      class: "me-search",
      style: b(`border-radius:${t.radius};background:${t.background};color:${t.color};`)
    }, [
      k(p, {
        name: "icon-search1",
        size: "15px",
        color: "inherit"
      }),
      h(v("input", {
        "onUpdate:modelValue": e[0] || (e[0] = (l) => o.value = l),
        type: "search",
        class: "input",
        placeholder: t.placeholder,
        style: b(`text-align:${t.align};`),
        disabled: t.disabled,
        onFocus: e[1] || (e[1] = //@ts-ignore
        (...l) => n(r) && n(r)(...l)),
        onBlur: e[2] || (e[2] = //@ts-ignore
        (...l) => n(u) && n(u)(...l)),
        onKeypress: e[3] || (e[3] = //@ts-ignore
        (...l) => n(i) && n(i)(...l)),
        onInput: e[4] || (e[4] = //@ts-ignore
        (...l) => n(s) && n(s)(...l)),
        onChange: e[5] || (e[5] = //@ts-ignore
        (...l) => n(m) && n(m)(...l))
      }, null, 44, D), [
        [M, o.value]
      ]),
      k(T, { name: "fade" }, {
        default: $(() => [
          t.modelValue ? (a(), S(p, {
            key: 0,
            name: "icon-close",
            size: "16px",
            color: "inherit",
            onClick: n(C)
          }, null, 8, ["onClick"])) : x("", !0)
        ]),
        _: 1
      }),
      t.btnText ? (a(), f("div", {
        key: 0,
        class: "btn",
        onClick: e[6] || (e[6] = //@ts-ignore
        (...l) => n(c) && n(c)(...l))
      }, z(t.btnText), 1)) : x("", !0)
    ], 4));
  }
});
export {
  U as default
};