vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
197 lines (196 loc) • 7.56 kB
JavaScript
import { defineComponent as q, ref as g, computed as s, watch as A, createElementBlock as l, openBlock as i, normalizeStyle as F, unref as p, createCommentVNode as u, createElementVNode as r, normalizeClass as w, renderSlot as d, createTextVNode as h, toDisplayString as c, withKeys as z, withModifiers as k, createVNode as G, mergeProps as H, createSlots as J, withCtx as $ } from "vue";
import O from "../button/index.js";
import { useInject as Q, useSlotsExist as U } from "../utils/index.js";
const X = {
key: 0,
class: "input-search-prefix"
}, Y = ["value", "placeholder", "maxlength", "disabled", "onKeydown"], Z = {
key: 1,
class: "input-search-suffix"
}, _ = {
key: 1,
class: "input-search-count"
}, ee = {
key: 2,
class: "suffix-item"
}, ae = ["onKeydown"], se = /* @__PURE__ */ q({
__name: "InputSearch",
props: {
width: { default: "100%" },
icon: { type: Boolean, default: !0 },
search: { default: void 0 },
searchProps: { default: () => ({}) },
size: { default: "middle" },
allowClear: { type: Boolean, default: !1 },
addonBefore: { default: void 0 },
prefix: { default: void 0 },
suffix: { default: void 0 },
loading: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 },
placeholder: { default: void 0 },
maxlength: { default: void 0 },
showCount: { type: Boolean, default: !1 },
value: { default: void 0 },
valueModifiers: { default: () => ({}) }
},
emits: ["update:value", "compositionstart", "compositionend", "change", "search"],
setup(E, { emit: I }) {
const a = E, C = g(null), f = g(!1), o = g(), { colorPalettes: y, shadowColor: M } = Q("InputSearch"), n = I, v = U(["prefix", "suffix", "addonBefore"]), K = s(() => typeof a.width == "number" ? `${a.width}px` : a.width), b = s(() => !a.disabled && a.allowClear), L = s(() => a.maxlength ? (o.value ? o.value.length : 0) + " / " + a.maxlength : o.value ? o.value.length : 0), N = s(() => v.prefix || a.prefix), B = s(() => v.suffix || a.suffix), P = s(() => b.value || a.showCount || B.value), S = s(() => v.addonBefore || a.addonBefore), x = s(() => "lazy" in a.valueModifiers);
A(
() => a.value,
(e) => {
o.value !== e && (o.value = e);
},
{
immediate: !0
}
);
function V(e) {
f.value = !0, n("compositionstart", e);
}
function R(e) {
f.value = !1, n("compositionend", e);
const t = new Event("change");
e.target?.dispatchEvent(t);
}
function j(e) {
if (!f.value) {
const t = e.target;
o.value = t.value, x.value || (n("update:value", t.value), n("change", e));
}
}
function D(e) {
const t = e.target;
t.value !== a.value && (n("update:value", t.value), n("change", e));
}
function T() {
o.value = "", n("update:value", ""), C.value?.focus();
}
function W(e) {
if (!(f.value || a.loading) && (m(e), x.value)) {
const t = new Event("change");
e.target?.dispatchEvent(t);
}
}
function m(e) {
n("search", o.value, e);
}
return (e, t) => (i(), l("div", {
class: "input-search-wrap",
style: F(`
--input-search-width: ${K.value};
--input-search-primary-color-hover: ${p(y)[4]};
--input-search-primary-color-focus: ${p(y)[4]};
--input-search-primary-shadow-color: ${p(M)};
`)
}, [
S.value ? (i(), l("span", {
key: 0,
class: w(["input-search-addon-before", `addon-before-${e.size}`])
}, [
d(e.$slots, "addonBefore", {}, () => [
h(c(e.addonBefore), 1)
], !0)
], 2)) : u("", !0),
r("div", {
tabindex: "1",
class: w(["input-search-container", [
`input-search-${e.size}`,
{
"input-search-before": S.value,
"input-search-disabled": e.disabled
}
]])
}, [
N.value ? (i(), l("span", X, [
d(e.$slots, "prefix", {}, () => [
h(c(e.prefix), 1)
], !0)
])) : u("", !0),
r("input", {
ref_key: "inputRef",
ref: C,
class: "input-search",
type: "text",
value: o.value,
placeholder: e.placeholder,
maxlength: e.maxlength,
disabled: e.disabled,
onCompositionstart: V,
onCompositionend: R,
onInput: j,
onChange: D,
onKeydown: z(k(W, ["prevent"]), ["enter"])
}, null, 40, Y),
P.value ? (i(), l("span", Z, [
b.value ? (i(), l("span", {
key: 0,
class: w(["input-search-clear", { "clear-hidden": !o.value }]),
onClick: T
}, [...t[0] || (t[0] = [
r("svg", {
class: "clear-svg",
focusable: "false",
"data-icon": "close-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
r("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z" })
], -1)
])], 2)) : u("", !0),
e.showCount ? (i(), l("span", _, c(L.value), 1)) : u("", !0),
B.value ? (i(), l("span", ee, [
d(e.$slots, "suffix", {}, () => [
h(c(e.suffix), 1)
], !0)
])) : u("", !0)
])) : u("", !0)
], 2),
r("span", {
class: "input-search-button",
onClick: m,
onKeydown: z(k(m, ["prevent"]), ["enter"])
}, [
d(e.$slots, "search", {}, () => [
G(p(O), H({
class: "search-btn",
size: e.size,
disabled: e.disabled,
loading: e.loading
}, e.searchProps), J({
default: $(() => [
h(" " + c(e.search), 1)
]),
_: 2
}, [
e.icon ? {
name: "icon",
fn: $(() => [
d(e.$slots, "icon", {}, () => [
t[1] || (t[1] = r("svg", {
focusable: "false",
"data-icon": "search",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
r("path", { d: "M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z" })
], -1))
], !0)
]),
key: "0"
} : void 0
]), 1040, ["size", "disabled", "loading"])
], !0)
], 40, ae)
], 4));
}
});
export {
se as default
};