import e from "../PlTooltip/PlTooltip.js";
import t from "../PlIcon24/PlIcon24.js";
import "../PlIcon24/index.js";
import n from "../PlIcon16/PlIcon16.js";
import "../PlIcon16/index.js";
import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, normalizeClass as f, openBlock as p, renderSlot as m, toDisplayString as h, unref as g, useModel as _, useSlots as v, vModelText as y, withCtx as b, withDirectives as x, withModifiers as S } from "vue";
var C = ["disabled", "placeholder"], w = /* @__PURE__ */ u({
	__name: "PlSearchField",
	props: /* @__PURE__ */ d({
		modelValue: {},
		clearable: { type: [Boolean, Function] },
		placeholder: {},
		disabled: { type: Boolean },
		helper: {}
	}, {
		modelValue: { required: !0 },
		modelModifiers: {}
	}),
	emits: ["update:modelValue"],
	setup(u) {
		let d = _(u, "modelValue"), w = u, T = v(), E = r(() => d.value != null && d.value.length > 0), D = r(() => w.helper != null || T.helper != null), O = () => {
			w.clearable && (d.value = typeof w.clearable == "function" ? w.clearable() : "");
		};
		return (r, u) => (p(), o("div", {
			ref: "root",
			class: f(r.$style.component)
		}, [
			l(g(t), { name: "search" }),
			x(s("input", {
				ref: "input",
				"onUpdate:modelValue": u[0] ||= (e) => d.value = e,
				disabled: w.disabled,
				placeholder: w.placeholder || "Find...",
				type: "text",
				spellcheck: "false"
			}, null, 8, C), [[y, d.value]]),
			w.clearable && E.value ? (p(), i(g(n), {
				key: 0,
				class: f(r.$style.clear),
				name: "delete-clear",
				onClick: S(O, ["stop"])
			}, null, 8, ["class"])) : a("", !0),
			D.value ? (p(), i(e, {
				key: 1,
				class: "info",
				position: "bottom"
			}, {
				tooltip: b(() => [m(r.$slots, "helper", {}, () => [c(h(w.helper), 1)])]),
				_: 3
			})) : a("", !0)
		], 2));
	}
});
export { w as default };

//# sourceMappingURL=PlSearchField.vue2.js.map