zenless-ui
Version:
A Vue.js 3 UI Library inspired by Zenless Zone Zero
1,757 lines • 78.3 kB
JavaScript
import { ref as k, computed as y, inject as D, openBlock as c, createElementBlock as u, normalizeClass as x, normalizeStyle as M, createElementVNode as g, nextTick as Ye, onBeforeUnmount as yt, provide as K, unref as _, renderSlot as $, withDirectives as P, createVNode as V, vShow as H, resolveComponent as L, createBlock as N, createCommentVNode as C, mergeModels as T, useModel as R, watchEffect as lt, createTextVNode as ne, toDisplayString as I, pushScopeId as me, popScopeId as fe, withCtx as j, getCurrentInstance as _t, watch as J, onMounted as Ue, onUnmounted as ve, defineComponent as Je, h as Qe, useSlots as Ge, Fragment as X, renderList as ae, reactive as zt, resolveDynamicComponent as W, vModelDynamic as $t, vModelCheckbox as xt, withModifiers as te, createSlots as kt, render as St } from "vue";
const wt = {
name: "de",
data: {
modal: {
cancel: "Abbrechen",
confirm: "OK"
},
pagination: {
prev: "Vorherigen",
next: "Nächsten"
},
select: {
empty: "Keine Einträge... \\[ o_x ]/"
},
table: {
empty: "Keine Einträge... \\[ o_x ]/"
}
}
}, Ct = {
name: "en",
data: {
modal: {
cancel: "Cancel",
confirm: "OK"
},
pagination: {
prev: "Prev Page",
next: "Next Page"
},
select: {
empty: "No Data... \\[ o_x ]/"
},
table: {
empty: "No Data... \\[ o_x ]/"
}
}
}, Bt = {
name: "es",
data: {
modal: {
cancel: "Cancelar",
confirm: "Confirmar"
},
pagination: {
prev: "Anterior",
next: "Siguiente"
},
select: {
empty: "Sin Datos... \\[ o_x ]/"
},
table: {
empty: "Sin Datos... \\[ o_x ]/"
}
}
}, Ot = {
name: "fr",
data: {
modal: {
cancel: "Annuler",
confirm: "OK"
},
pagination: {
prev: "Précédente",
next: "Suivante"
},
select: {
empty: "Aucune Donnée... \\[ o_x ]/"
},
table: {
empty: "Aucune Donnée... \\[ o_x ]/"
}
}
}, It = {
name: "id",
data: {
modal: {
cancel: "Batal",
confirm: "Ya"
},
pagination: {
prev: "Sebelumnya",
next: "Berikutnya"
},
select: {
empty: "Tidak Ada Data... \\[ o_x ]/"
},
table: {
empty: "Tidak Ada Data... \\[ o_x ]/"
}
}
}, jt = {
name: "it",
data: {
modal: {
cancel: "Cancella",
confirm: "OK"
},
pagination: {
prev: "Precedente",
next: "Successiva"
},
select: {
empty: "Nessun Dato... \\[ o_x ]/"
},
table: {
empty: "Nessun Dato... \\[ o_x ]/"
}
}
}, Zt = {
name: "ja",
data: {
modal: {
cancel: "キャンセル",
confirm: "確認"
},
pagination: {
prev: "前へ",
next: "次へ"
},
select: {
empty: "データなし... \\[ o_x ]/"
},
table: {
empty: "データなし... \\[ o_x ]/"
}
}
}, Tt = {
name: "ko",
data: {
modal: {
cancel: "취소",
confirm: "확인"
},
pagination: {
prev: "이전",
next: "다음"
},
select: {
empty: "데이터 없음... \\[ o_x ]/"
},
table: {
empty: "데이터 없음... \\[ o_x ]/"
}
}
}, Vt = {
name: "ru",
data: {
modal: {
cancel: "Отмена",
confirm: "OK"
},
pagination: {
prev: "Предыдущую",
next: "Следующую"
},
select: {
empty: "Нет Данных... \\[ o_x ]/"
},
table: {
empty: "Нет Данных... \\[ o_x ]/"
}
}
}, q = {
name: "zh-cn",
data: {
modal: {
cancel: "取消",
confirm: "确认"
},
pagination: {
prev: "上一页",
next: "下一页"
},
select: {
empty: "暂无数据... \\[ o_x ]/"
},
table: {
empty: "暂无数据... \\[ o_x ]/"
}
}
}, ao = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
de: wt,
en: Ct,
es: Bt,
fr: Ot,
id: It,
it: jt,
ja: Zt,
ko: Tt,
ru: Vt,
zhCn: q
}, Symbol.toStringTag, { value: "Module" })), oe = k({
isBold: !1,
isItalic: !0,
locale: q
}), st = Symbol("zenlessContextKey"), Q = ["extra", "large", "small", "mini"], A = ["default", "primary", "success", "danger", "warning", "info", "ether", "fire", "electric", "ice", "physical"], it = () => {
let e, a;
document.getAnimations().sort((t, n) => (t.startTime ?? 1 / 0) - (n.startTime ?? 1 / 0)).forEach((t) => {
switch (t.animationName) {
case "z_ani_background":
case "z_ani_border_color":
case "z_ani_color":
case "z_ani_outline_color":
e ? t.currentTime = e : e = t.currentTime;
break;
case "z_ani_size":
case "z_ani_skew_size":
case "z_ani_outline_size":
a ? t.currentTime = a : a = t.currentTime;
break;
}
return t;
}), requestAnimationFrame(it);
};
requestAnimationFrame(it);
const ct = Symbol("scrollbarContextKey"), Mt = {
vertical: {
offset: "offsetHeight",
scroll: "scrollTop",
scrollSize: "scrollHeight",
size: "height",
key: "vertical",
axis: "Y",
client: "clientY",
direction: "top"
},
horizontal: {
offset: "offsetWidth",
scroll: "scrollLeft",
scrollSize: "scrollWidth",
size: "width",
key: "horizontal",
axis: "X",
client: "clientX",
direction: "left"
}
}, S = (e, a) => {
const t = e.__vccOpts || e;
for (const [n, o] of a)
t[n] = o;
return t;
}, Nt = /* @__PURE__ */ Object.assign({
name: "ZScrollbarBar"
}, {
__name: "bar",
props: {
horizontal: Boolean,
move: Number,
size: String
},
setup(e) {
const a = e, t = k(null), n = k(null), o = { X: 0, Y: 0 };
let l = !1;
const s = y(() => Mt[a.horizontal ? "horizontal" : "vertical"]), i = y(() => {
const f = {};
return a.horizontal && m.fixedAxis.value.y ? Object.assign(f, {
right: "25px"
}) : !a.horizontal && m.fixedAxis.value.x && Object.assign(f, {
bottom: "25px"
}), f;
}), m = D(ct), d = (f) => {
const r = s.value, v = Math.abs(f.target.getBoundingClientRect()[r.direction] - f[r.client]), O = n.value[r.offset] / 2, B = (v - O) * 100 / t.value[r.offset];
m.wrapRef.value[r.scroll] = B * m.wrapRef.value[r.scrollSize] / 100;
}, h = (f) => {
if (f.ctrlKey || f.button === 2) return;
const r = s.value;
b(f), o[r.axis] = f.currentTarget[r.offset] - (f[r.client] - f.currentTarget.getBoundingClientRect()[r.direction]);
}, b = (f) => {
f.stopImmediatePropagation(), l = !0, document.addEventListener("mousemove", z), document.addEventListener("mouseup", p), document.onselectstart = () => !1;
}, z = (f) => {
if (!l) return;
const r = s.value, v = o[r.axis];
if (!v) return;
const O = -(t.value.getBoundingClientRect()[r.direction] - f[r.client]), B = n.value[r.offset] - v, F = (O - B) * 100 / t.value[r.offset];
m.wrapRef.value[r.scroll] = F * m.wrapRef.value[r.scrollSize] / 100;
}, p = () => {
l = !1, o[s.value.axis] = 0, document.removeEventListener("mousemove", z), document.onselectstart = null, document.removeEventListener("mouseup", p);
};
return (f, r) => (c(), u("div", {
ref_key: "barRef",
ref: t,
class: x([
"z-scrollbar__bar",
{
"z-scrollbar__horizontal": e.horizontal,
"z-scrollbar__vertical": !e.horizontal
}
]),
style: M(i.value)
}, [
g("i", {
class: x([{
"z-icon-caret-left": e.horizontal,
"z-icon-caret-top": !e.horizontal
}])
}, null, 2),
g("div", {
class: "z-scrollbar__thumb",
onMousedown: d
}, [
g("div", {
ref_key: "trackRef",
ref: n,
class: "z-scrollbar__track",
style: M({
transform: `translate${s.value.axis}(${e.move}%)`,
[s.value.size]: e.size
}),
onMousedown: h
}, null, 36)
], 32),
g("i", {
class: x([{
"z-icon-caret-right": e.horizontal,
"z-icon-caret-bottom": !e.horizontal
}])
}, null, 2)
], 6));
}
}), nt = /* @__PURE__ */ S(Nt, [["__scopeId", "data-v-510fcee1"]]);
let pe;
const Et = () => {
if (pe !== void 0) return pe;
const e = document.createElement("div");
e.style.visibility = "hidden", e.style.width = "100px", e.style.overflow = "scroll", document.body.appendChild(e);
const a = document.createElement("div");
a.style.width = "100%", e.appendChild(a);
const t = e.offsetWidth, n = a.offsetWidth;
return pe = t - n, document.body.removeChild(e), pe;
};
function Pt(e, a, t) {
var n = t || {}, o = n.noTrailing, l = o === void 0 ? !1 : o, s = n.noLeading, i = s === void 0 ? !1 : s, m = n.debounceMode, d = m === void 0 ? void 0 : m, h, b = !1, z = 0;
function p() {
h && clearTimeout(h);
}
function f(v) {
var O = v || {}, B = O.upcomingOnly, F = B === void 0 ? !1 : B;
p(), b = !F;
}
function r() {
for (var v = arguments.length, O = new Array(v), B = 0; B < v; B++)
O[B] = arguments[B];
var F = this, be = Date.now() - z;
if (b)
return;
function ee() {
z = Date.now(), a.apply(F, O);
}
function w() {
h = void 0;
}
!i && d && !h && ee(), p(), d === void 0 && be > e ? i ? (z = Date.now(), l || (h = setTimeout(d ? w : ee, e))) : ee() : l !== !0 && (h = setTimeout(d ? w : ee, d === void 0 ? e - be : e));
}
return r.cancel = f, r;
}
function Dt(e, a, t) {
var n = {}, o = n.atBegin, l = o === void 0 ? !1 : o;
return Pt(e, a, {
debounceMode: l !== !1
});
}
const Lt = (e) => {
for (let a of e) {
const t = a.target.__resizeListeners__ || [];
t.length > 0 && t.forEach((n) => {
n();
});
}
}, Rt = (e, a) => {
e.__resizeListeners__ || (e.__resizeListeners__ = [], e.__resizeObserver__ = new ResizeObserver(Dt(16, Lt)), e.__resizeObserver__.observe(e)), e.__resizeListeners__.push(a);
}, At = (e, a) => {
!e || !e.__resizeListeners__ || (e.__resizeListeners__.splice(e.__resizeListeners__.indexOf(a), 1), e.__resizeListeners__.length === 0 && e.__resizeObserver__.disconnect());
}, Ht = { class: "z-scrollbar" }, Kt = /* @__PURE__ */ Object.assign({
name: "ZScrollbar"
}, {
__name: "scrollbar",
props: {
fixed: {
type: [Boolean, Object],
default: {
y: !0
}
},
hideScroll: Boolean,
resizable: {
type: Boolean,
default: !0
}
},
setup(e, { expose: a }) {
const t = e, n = k(null), o = k(null), l = k(0), s = k(0), i = k(""), m = k(""), d = Et(), h = k(!1), b = k(!1), z = y(() => {
const r = { y: !0, x: !1 };
return typeof t.fixed == "boolean" ? Object.assign(r, { x: t.fixed, y: t.fixed }) : typeof t.fixed == "object" && ("x" in t.fixed && Object.assign(r, {
x: !!t.fixed.x
}), "y" in t.fixed && Object.assign(r, {
y: !!t.fixed.y
})), !r.x && Object.assign(r, { x: b.value }), !r.y && Object.assign(r, { y: h.value }), r;
}), p = () => {
if (t.hideScroll) return;
const r = n.value;
if (!r) return;
const v = o.value;
b.value = r.clientWidth < v.clientWidth, h.value = r.clientHeight < v.clientHeight;
const O = r.clientWidth * 100 / r.scrollWidth, B = r.clientHeight * 100 / r.scrollHeight;
i.value = O < 100 ? `${O}%` : "100%", m.value = B < 100 ? `${B}%` : "100%";
};
Ye(() => {
t.resizable ? Rt(o.value, p) : p();
}), yt(() => {
At(o.value, p);
});
const f = () => {
if (t.hideScroll) return;
const r = n.value;
l.value = r.scrollLeft * 100 / r.clientWidth, s.value = r.scrollTop * 100 / r.clientHeight;
};
return K(ct, {
wrapRef: n,
fixedAxis: z
}), a({
scrollTarget: n
}), (r, v) => (c(), u("div", Ht, [
g("div", {
ref_key: "wrapRef",
ref: n,
class: "z-scrollbar__wrap",
style: M({
marginRight: `-${_(d)}px`,
marginBottom: `-${_(d)}px`
}),
onScroll: f
}, [
g("div", {
ref_key: "resizeRef",
ref: o,
class: "z-scrollbar__view"
}, [
$(r.$slots, "default", {}, void 0, !0)
], 512),
P(V(nt, {
horizontal: "",
move: l.value,
size: i.value
}, null, 8, ["move", "size"]), [
[H, !e.hideScroll && (z.value.x || b.value)]
]),
P(V(nt, {
move: s.value,
size: m.value
}, null, 8, ["move", "size"]), [
[H, !e.hideScroll && (z.value.y || h.value)]
])
], 36)
]));
}
}), ge = /* @__PURE__ */ S(Kt, [["__scopeId", "data-v-e7f00bcd"]]);
ge.install = function(e) {
e.component(ge.name, ge);
};
const Wt = ["disabled", "type"], Ft = {
key: 0,
class: "z-button__icon is-loading z-icon-loading"
}, Xt = {
key: 2,
class: "z-button__content"
}, qt = /* @__PURE__ */ Object.assign({
name: "ZButton"
}, {
__name: "button",
props: {
size: {
type: String,
validator: (e) => Q.includes(e)
},
type: {
type: String,
validator: (e) => A.includes(e)
},
icon: [String, Object],
loading: Boolean,
disabled: Boolean,
plain: Boolean,
round: {
type: Boolean,
default: !0
},
circle: Boolean,
hollow: Boolean,
nativeType: {
type: String,
default: "button"
},
highlight: Boolean
},
emits: ["click"],
setup(e, { emit: a }) {
const t = k(null), n = k(null), o = Z(), l = e, s = k(!1), i = k(!1), m = y(() => {
if (!l.icon) return;
const p = {};
return typeof l.icon == "string" ? Object.assign(p, {
name: l.icon
}) : typeof l.icon == "object" && Object.assign(p, {
name: Object.keys(l.icon)[0],
color: Object.values(l.icon)[0]
}), p;
}), d = a, h = (p) => {
d("click", p);
}, b = (p) => {
p.button > 0 || s.value || (p.stopImmediatePropagation(), s.value = !0, document.addEventListener("mouseup", z));
}, z = () => {
i.value || (i.value = !0, document.removeEventListener("mouseup", z), Ye(async () => {
try {
await document.getAnimations().find(
(p) => p.animationName.startsWith("z_ani_btn_inactive_bg") && p.effect.target === n.value
).finished;
} catch {
} finally {
i.value = !1, s.value = !1;
}
}));
};
return (p, f) => {
const r = L("z-icon");
return c(), u("button", {
ref_key: "buttonRef",
ref: t,
class: x([
"z-button",
{
"is-bold": _(o).isBold,
"is-italic": _(o).isItalic,
[`z-button--${e.size}`]: e.size,
"z-button--default": !e.type,
[`z-button--${e.type}`]: e.type,
"z-button--highlight": e.highlight,
"z-button--plain": e.plain && !e.hollow,
"z-button--hollow": e.hollow,
"z-button--round": e.round,
"z-button--circle": e.circle,
"z-button--disabled": e.disabled || e.loading,
"z-button--active": s.value
}
]),
disabled: e.disabled || e.loading,
type: e.nativeType,
onMousedown: b,
onClick: h
}, [
P(g("div", {
ref_key: "buttonActiveRef",
ref: n,
class: x(["z-button--active__bg", { "is-fadeout": i.value }])
}, null, 2), [
[H, s.value]
]),
e.loading ? (c(), u("i", Ft)) : m.value ? (c(), N(r, {
key: 1,
class: "z-button__icon",
name: m.value.name,
color: m.value.color
}, null, 8, ["name", "color"])) : C("", !0),
p.$slots.default ? (c(), u("div", Xt, [
$(p.$slots, "default", {}, void 0, !0)
])) : C("", !0)
], 42, Wt);
};
}
}), he = /* @__PURE__ */ S(qt, [["__scopeId", "data-v-fae86ec8"]]);
he.install = function(e) {
e.component(he.name, he);
};
const Yt = /* @__PURE__ */ Object.assign({
name: "ZIcon"
}, {
__name: "icon",
props: {
name: String,
size: [Number, String],
color: String
},
setup(e) {
const a = e, t = y(() => {
if (A.includes(a.color))
return a.color;
}), n = y(() => {
const o = {};
return a.size && Object.assign(o, {
fontSize: `${a.size}${typeof a.size == "number" ? "px" : ""}`
}), a.color && !A.includes(a.color) && Object.assign(o, {
color: a.color
}), o;
});
return (o, l) => (c(), u("i", {
class: x(["z-icon", {
[`z-icon-${e.name}`]: e.name,
[`z-icon--${t.value}`]: t.value
}]),
style: M(n.value)
}, null, 6));
}
}), ye = /* @__PURE__ */ S(Yt, [["__scopeId", "data-v-3556531f"]]);
ye.install = function(e) {
e.component(ye.name, ye);
};
const Gt = ["href"], Ut = /* @__PURE__ */ Object.assign({
name: "ZLink"
}, {
__name: "link",
props: {
type: {
type: String,
default: "default"
},
highlight: Boolean,
underline: Boolean,
disabled: Boolean,
href: String,
icon: String
},
emits: ["click"],
setup(e, { emit: a }) {
const t = Z(), n = e, o = a, l = (s) => {
!n.disabled && !n.href && o("click", s);
};
return (s, i) => (c(), u("a", {
class: x([
"z-link",
{
"is-bold": _(t).isBold,
"z-link--default": !e.type,
[`z-link--${e.type}`]: e.type,
"z-link--underline": e.underline,
"z-link--disabled": e.disabled,
"z-link--highlight": e.highlight
}
]),
href: e.disabled ? null : e.href,
onClick: l
}, [
$(s.$slots, "default", {}, void 0, !0)
], 10, Gt));
}
}), _e = /* @__PURE__ */ S(Ut, [["__scopeId", "data-v-1bebf916"]]);
_e.install = function(e) {
e.component(_e.name, _e);
};
const rt = Symbol("collapseContextKey"), Jt = { class: "z-collapse" }, Qt = /* @__PURE__ */ Object.assign({
name: "ZCollapse"
}, {
__name: "collapse",
props: /* @__PURE__ */ T({
accordion: Boolean,
plain: Boolean
}, {
modelValue: {
type: [String, Number, Array]
},
modelModifiers: {}
}),
emits: /* @__PURE__ */ T(["change"], ["update:modelValue"]),
setup(e, { emit: a }) {
const t = e, n = R(e, "modelValue"), o = a, l = k([]);
lt(() => {
const { value: i } = n;
i instanceof Array ? l.value = i : (typeof i == "string" || typeof i == "number") && (l.value = [i]);
});
const s = (i) => {
let m = [...l.value];
const d = m.indexOf(i);
d > -1 ? m.splice(d, 1) : t.accordion ? m = [i] : m.push(i), l.value = m, o("change", m);
};
return K(rt, {
plain: t.plain,
activeItems: l,
handleItemClick: s
}), (i, m) => (c(), u("div", Jt, [
$(i.$slots, "default", {}, void 0, !0)
]));
}
}), ze = /* @__PURE__ */ S(Qt, [["__scopeId", "data-v-4e466ec0"]]);
ze.install = function(e) {
e.component(ze.name, ze);
};
const Y = () => Math.floor(Math.random() * 1e4), et = (e) => e !== void 0 && !Number.isNaN(e) && e !== null, at = (e) => `${e}`[1] ? `${e}` : `0${e}`, en = (e) => (me("data-v-bcab6bf5"), e = e(), fe(), e), tn = { class: "z-collapse-item__title" }, nn = /* @__PURE__ */ en(() => /* @__PURE__ */ g("i", { class: "z-icon-caret-bottom" }, null, -1)), an = { class: "z-collapse-item__wrap" }, on = { class: "z-collapse-item__content" }, ln = /* @__PURE__ */ Object.assign({
name: "ZCollapseItem"
}, {
__name: "collapse-item",
props: {
title: String,
name: [String, Number],
disabled: Boolean
},
setup(e) {
const a = Z(), t = e, n = y(() => t.name ?? Y()), o = D(rt), l = y(() => o.activeItems.value.includes(n.value)), s = () => {
t.disabled || o.handleItemClick(n.value);
};
return (i, m) => (c(), u("div", {
class: x([
"z-collapse-item",
{
"is-bold": _(a).isBold,
"z-collapse-item--plain": _(o).plain,
"z-collapse-item--active": l.value,
"z-collapse-item--disabled": e.disabled
}
])
}, [
g("div", {
class: "z-collapse-item__header",
onClick: s
}, [
g("div", tn, [
$(i.$slots, "title", {}, () => [
ne(I(e.title), 1)
], !0)
]),
nn
]),
g("div", an, [
P(g("div", on, [
$(i.$slots, "default", {}, void 0, !0)
], 512), [
[H, l.value]
])
])
], 2));
}
}), $e = /* @__PURE__ */ S(ln, [["__scopeId", "data-v-bcab6bf5"]]);
$e.install = function(e) {
e.component($e.name, $e);
};
const tt = Symbol("menuContextKey"), dt = Symbol("subMenuContextKey"), ut = (e) => (me("data-v-7cb430fa"), e = e(), fe(), e), sn = { class: "z-menu z-menu--vertical" }, cn = /* @__PURE__ */ ut(() => /* @__PURE__ */ g("div", { class: "z-menu__prefix" }, [
/* @__PURE__ */ g("i", { class: "z-icon-caret-top" })
], -1)), rn = { class: "z-menu__content" }, dn = /* @__PURE__ */ ut(() => /* @__PURE__ */ g("div", { class: "z-menu__suffix" }, [
/* @__PURE__ */ g("i", { class: "z-icon-caret-bottom" })
], -1)), un = /* @__PURE__ */ Object.assign({
name: "ZMenu"
}, {
__name: "menu",
props: /* @__PURE__ */ T({
accordion: Boolean,
defaultOpen: [String, Number, Array]
}, {
modelValue: {
type: [String, Number]
},
modelModifiers: {}
}),
emits: /* @__PURE__ */ T(["change"], ["update:modelValue"]),
setup(e, { emit: a }) {
const t = e, n = R(e, "modelValue"), o = a, l = k({}), s = k({});
if (t.defaultOpen) {
if (typeof t.defaultOpen == "string" || typeof t.defaultOpen == "number")
Object.assign(s.value, {
[t.defaultOpen]: !0
});
else if (t.defaultOpen instanceof Array) {
const d = {};
t.defaultOpen.forEach((h) => {
Object.assign(d, {
[h]: !0
});
}), Object.assign(s.value, d);
}
}
return K(tt, {
active: n,
items: l,
subMenus: s,
handleItemClick: (d) => {
n.value !== d && (n.value = d, o("change", d));
},
handleSubMenuClick: (d) => {
t.accordion && Object.keys(s.value).forEach((h) => {
h !== d && s.value[h] && Object.assign(s.value, {
[h]: !1
});
}), Object.assign(s.value, {
[d]: !s.value[d]
});
}
}), (d, h) => {
const b = L("z-scrollbar");
return c(), u("div", sn, [
cn,
V(b, {
class: "z-menu__scrollbar",
"hide-scroll": ""
}, {
default: j(() => [
g("div", rn, [
$(d.$slots, "default", {}, void 0, !0)
])
]),
_: 3
}),
dn
]);
};
}
}), xe = /* @__PURE__ */ S(un, [["__scopeId", "data-v-7cb430fa"]]);
xe.install = function(e) {
e.component(xe.name, xe);
};
const mn = { key: 1 }, fn = /* @__PURE__ */ Object.assign({
name: "ZMenuItem"
}, {
__name: "menu-item",
props: {
name: [String, Number],
icon: String,
title: String,
disabled: Boolean
},
setup(e) {
const a = Z(), t = e, n = y(() => t.name ?? Y()), o = D(tt);
let l;
const s = y(() => o.active.value === n.value || l && o.items.value[o.active.value] && n.value === o.items.value[o.active.value].parent);
_t().parent.type.name === "ZSubMenu" && (l = D(dt)), J(n, (d, h) => {
const b = l && l.name.value !== d;
Object.assign(o.items.value, {
[d]: {
parent: b ? l.name.value : void 0,
active: s.value
}
}), b && s.value && Object.assign(o.items.value[l.name.value], {
active: !0
}), et(h) && delete o.items.value[h];
}, {
immediate: !0
}), Ue(() => {
l && l.name.value !== t.name && s.value && Object.assign(o.subMenus.value, {
[l.name.value]: !0
});
});
const m = () => {
t.disabled || (l && l.name.value === n.value ? o.handleSubMenuClick(n.value) : o.handleItemClick(n.value));
};
return ve(() => {
delete o.items.value[n.value];
}), (d, h) => (c(), u("div", {
class: x([
"z-menu__item",
{
"is-bold": _(a).isBold,
"is-active": s.value,
"is-disabled": e.disabled
}
]),
onClick: m
}, [
e.icon ? (c(), u("i", {
key: 0,
class: x(["z-menu__icon", `z-icon-${e.icon}`])
}, null, 2)) : C("", !0),
e.title ? (c(), u("span", mn, I(e.title), 1)) : C("", !0),
d.$slots.default ? $(d.$slots, "default", { key: 2 }, void 0, !0) : C("", !0)
], 2));
}
}), ke = /* @__PURE__ */ S(fn, [["__scopeId", "data-v-6c000439"]]);
ke.install = function(e) {
e.component(ke.name, ke);
};
const vn = { class: "z-menu__group" }, bn = /* @__PURE__ */ Object.assign({
name: "ZSubMenu"
}, {
__name: "sub-menu",
props: {
name: [String, Number],
icon: String,
title: String,
disabled: Boolean
},
setup(e) {
const a = e, t = y(() => a.name ?? Y()), n = D(tt), o = y(() => n.subMenus.value[t.value]);
return J(t, (l, s) => {
Object.assign(n.subMenus.value, {
[l]: o.value
}), s && delete n.subMenus.value[s];
}, {
immediate: !0
}), ve(() => {
delete n.subMenus.value[t.value], delete n.items.value[t.value];
}), K(dt, {
name: t
}), (l, s) => {
const i = L("z-menu-item");
return c(), u("div", vn, [
V(i, {
name: t.value,
icon: e.icon,
title: e.title,
disabled: e.disabled
}, {
default: j(() => [
$(l.$slots, "title", {}, void 0, !0)
]),
_: 3
}, 8, ["name", "icon", "title", "disabled"]),
g("div", {
class: x(["z-menu__sub", { "is-open": o.value }])
}, [
$(l.$slots, "default", {}, void 0, !0)
], 2)
]);
};
}
}), Se = /* @__PURE__ */ S(bn, [["__scopeId", "data-v-bf1ddfca"]]);
Se.install = function(e) {
e.component(Se.name, Se);
};
const pn = /* @__PURE__ */ Object.assign({
name: "ZBacktop"
}, {
__name: "backtop",
props: {
target: Object,
visibleHeight: {
type: Number,
default: 200
},
right: {
type: Number,
default: 60
},
bottom: {
type: Number,
default: 40
}
},
setup(e) {
const a = e, t = k(!1), n = () => {
a.target && (a.target.scrollTop >= a.visibleHeight && !t.value ? t.value = !0 : a.target.scrollTop < a.visibleHeight && t.value && (t.value = !1));
};
J(() => a.target, () => {
a.target && (n(), a.target.addEventListener("scroll", n));
});
const o = () => {
a.target && a.target.scrollTo({
top: 0,
behavior: "smooth"
});
};
return ve(() => {
a.target && a.target.removeEventListener("scroll", n);
}), (l, s) => {
const i = L("z-button");
return P((c(), N(i, {
class: "z-backtop",
size: "extra",
circle: "",
icon: "caret-top",
style: M({
right: `${e.right}px`,
bottom: `${e.bottom}px`
}),
onClick: o
}, null, 8, ["style"])), [
[H, t.value]
]);
};
}
}), we = /* @__PURE__ */ S(pn, [["__scopeId", "data-v-07240642"]]);
we.install = function(e) {
e.component(we.name, we);
};
const gn = { class: "z-tag__content" }, hn = /* @__PURE__ */ Object.assign({
name: "ZTag"
}, {
__name: "tag",
props: {
size: {
type: String,
validator: (e) => Q.includes(e)
},
type: {
type: String,
validator: (e) => A.includes(e)
},
plain: Boolean,
hollow: Boolean,
round: {
type: Boolean,
default: !0
},
closable: Boolean
},
emits: ["close"],
setup(e, { emit: a }) {
const t = Z(), n = k(!1), o = a, l = () => {
n.value = !n.value;
}, s = (i) => {
o("close", i);
};
return (i, m) => (c(), u("div", {
class: x(["z-tag", {
"is-bold": _(t).isBold,
[`z-tag--${e.size}`]: e.size,
"z-tag--default": !e.type,
[`z-tag--${e.type}`]: e.type,
"z-tag--plain": e.plain && !e.hollow,
"z-tag--hollow": e.hollow,
"z-tag--round": e.round
}])
}, [
g("div", gn, [
$(i.$slots, "default", {}, void 0, !0)
]),
e.closable ? (c(), u("i", {
key: 0,
class: x([{
"z-icon-close": !n.value,
"z-icon-error": n.value
}]),
onMouseenter: l,
onMouseleave: l,
onClick: s
}, null, 34)) : C("", !0)
], 2));
}
}), le = /* @__PURE__ */ S(hn, [["__scopeId", "data-v-66ca21ff"]]);
le.install = function(e) {
e.component(le.name, le);
};
const yn = { class: "z-badge__content" }, _n = /* @__PURE__ */ Object.assign({
name: "ZBadge"
}, {
__name: "badge",
props: {
type: {
type: String,
validator: (e) => A.includes(e)
},
isDot: Boolean,
value: [String, Number]
},
setup(e) {
const a = Z();
return (t, n) => (c(), u("div", {
class: x(["z-badge", {
"is-bold": _(a).isBold,
"z-badge--default": !e.type,
[`z-badge--${e.type}`]: e.type,
"z-badge--dot": e.isDot
}])
}, [
$(t.$slots, "default", {}, void 0, !0),
g("sup", yn, I(e.isDot ? "" : e.value), 1)
], 2));
}
}), Ce = /* @__PURE__ */ S(_n, [["__scopeId", "data-v-b13a2ed5"]]);
Ce.install = function(e) {
e.component(Ce.name, Ce);
};
const mt = Symbol("tabsContextKey"), zn = [
"top",
"bottom",
"top-left",
"top-right",
"bottom-left",
"bottom-right"
], $n = Je({
name: "ZTabItem",
props: ["content"],
render() {
return Qe("div", {
class: "z-tab-item"
}, this.content);
}
}), xn = { class: "z-tabs__header" }, kn = ["onClick"], Sn = { class: "z-tabs__content" }, wn = /* @__PURE__ */ Object.assign({
name: "ZTabs"
}, {
__name: "tabs",
props: /* @__PURE__ */ T({
placement: {
type: String,
validator: (e) => zn.includes(e)
}
}, {
modelValue: {
type: [String, Number]
},
modelModifiers: {}
}),
emits: /* @__PURE__ */ T(["change"], ["update:modelValue"]),
setup(e, { emit: a }) {
const t = Z(), n = Ge(), o = k([]), l = R(e, "modelValue"), s = a, i = (d) => {
d.props.disabled || l.value !== d.props.name && (l.value = d.props.name, s("change", d.props.name));
};
return K(mt, {
active: l,
panels: o,
addPanelItem: (d) => {
const h = [];
n.default().forEach((b) => {
if (b.type.name === "ZTabPanel")
if (b.props.name === d.name)
h.push(d);
else {
const z = o.value.find((p) => p.name === b.props.name);
z && h.push(z);
}
}), o.value = h;
},
handleItemClick: i
}), (d, h) => (c(), u("div", {
class: x(["z-tabs", {
[`at-${e.placement}`]: e.placement
}])
}, [
g("div", xn, [
(c(!0), u(X, null, ae(o.value, (b) => (c(), u("div", {
key: b.props.name,
class: x(["z-tabs__item", {
"is-bold": _(t).isBold,
"is-active": l.value === b.props.name,
"is-disabled": b.props.disabled
}]),
onClick: (z) => i(b)
}, [
V(_($n), {
content: b.slots.label ? b.slots.label() : b.props.label
}, null, 8, ["content"])
], 10, kn))), 128))
]),
g("div", Sn, [
$(d.$slots, "default", {}, void 0, !0)
])
], 2));
}
}), Be = /* @__PURE__ */ S(wn, [["__scopeId", "data-v-76c4f26a"]]);
Be.install = function(e) {
e.component(Be.name, Be);
};
const Cn = {
key: 0,
class: "z-tab-panel"
}, Bn = /* @__PURE__ */ Object.assign({
name: "ZTabPanel"
}, {
__name: "tab-panel",
props: {
label: String,
name: [String, Number],
disabled: Boolean,
lazy: Boolean
},
setup(e) {
const a = Ge(), t = e, n = D(mt), o = y(() => t.name ?? Y()), l = y(() => n.active.value === t.name), s = k(l.value);
J(l, (m) => {
m && (s.value = !0);
});
const i = zt({
slots: a,
props: t,
name: o,
active: l
});
return Ue(() => {
n.addPanelItem(i);
}), ve(() => {
const m = n.panels.value.findIndex((d) => d.name === o);
n.panels.value.splice(m, 1);
}), (m, d) => !e.lazy || s.value ? P((c(), u("div", Cn, [
$(m.$slots, "default", {}, void 0, !0)
], 512)), [
[H, l.value]
]) : C("", !0);
}
}), Oe = /* @__PURE__ */ S(Bn, [["__scopeId", "data-v-5ef6310b"]]);
Oe.install = function(e) {
e.component(Oe.name, Oe);
};
const On = [
"top",
"left",
"right",
"bottom",
"top-left",
"top-right",
"bottom-left",
"bottom-right",
"left-top",
"left-bottom",
"right-top",
"right-bottom"
], In = (e) => (me("data-v-9f4ad67d"), e = e(), fe(), e), jn = /* @__PURE__ */ In(() => /* @__PURE__ */ g("div", { class: "z-tooltip__arrow" }, null, -1)), Zn = { key: 1 }, Tn = /* @__PURE__ */ Object.assign({
name: "ZTooltip"
}, {
__name: "tooltip",
props: {
content: String,
placement: {
type: String,
validator: (e) => On.includes(e)
},
visible: Boolean,
disabled: Boolean
},
setup(e) {
const a = Z();
return (t, n) => (c(), u("div", {
class: x(["z-tooltip", {
[`at-${e.placement}`]: e.placement,
"is-visible": e.visible,
"is-disabled": e.disabled
}])
}, [
$(t.$slots, "default", {}, void 0, !0),
jn,
g("div", {
class: x(["z-tooltip__popper", { "is-bold": _(a).isBold }])
}, [
t.$slots.content ? $(t.$slots, "content", { key: 0 }, void 0, !0) : (c(), u("span", Zn, I(e.content), 1))
], 2)
], 2));
}
}), se = /* @__PURE__ */ S(Tn, [["__scopeId", "data-v-9f4ad67d"]]);
se.install = function(e) {
e.component(se.name, se);
};
const ft = Symbol("radioGroupContextKey"), vt = ["radio", "checkbox"], Vn = ["label", "button"], Mn = {
key: 0,
class: "z-radio__input"
}, Nn = { class: "z-icon-check" }, En = { class: "z-icon-minus" }, Pn = ["type", "name", "value", "disabled", "checked"], Dn = /* @__PURE__ */ Object.assign({
name: "ZRadio"
}, {
__name: "radio",
props: {
modelValue: [String, Number, Boolean],
value: [String, Number],
disabled: Boolean,
size: {
type: String,
validator: (e) => Q.includes(e)
},
mode: {
type: String,
default: "radio",
validator: (e) => vt.includes(e)
},
name: String,
shape: {
type: String,
default: "label",
validator: (e) => Vn.includes(e)
},
indeterminate: Boolean
},
emits: ["update:modelValue", "change"],
setup(e, { emit: a }) {
const t = Z(), n = D(ft, null), o = e, l = k(null), s = y(() => o.value ?? Y()), i = y(() => o.size || n && n.props.size), m = y(() => o.mode === "checkbox"), d = y(() => m.value ? !!f.value : f.value === s.value), h = y(() => n && (n.props.min > 0 && n.modelValue.value.length <= n.props.min && d.value || n.props.max > 0 && n.modelValue.value.length >= n.props.max && !d.value)), b = y(() => n && n.props.disabled || o.disabled || m.value && h.value), z = y(() => o.shape === "button"), p = a, f = y({
get() {
return n ? m.value ? n.modelValue.value instanceof Array && n.modelValue.value.includes(s.value) : n.modelValue.value : o.modelValue;
},
set(r) {
if (n)
if (m.value) {
let v = [...n.modelValue.value || []];
if (r)
v.push(s.value);
else {
const O = v.indexOf(s.value);
v.splice(O, 1);
}
n.changeEvent(v);
} else
n.changeEvent(r);
else
p("update:modelValue", r), p("change", r);
}
});
return (r, v) => (c(), u("label", {
class: x(["z-radio", {
"is-checkbox": m.value,
"is-button": z.value,
[`z-radio--${i.value}`]: i.value,
"is-checked": d.value,
"is-disabled": b.value,
"is-bold": _(t).isBold
}])
}, [
z.value ? C("", !0) : (c(), u("span", Mn, [
P(g("i", Nn, null, 512), [
[H, d.value]
]),
P(g("i", En, null, 512), [
[H, !d.value && e.indeterminate]
])
])),
(c(), N(W(z.value ? _(le) : "span"), {
class: "z-radio__label",
size: e.size,
type: d.value ? "primary" : "default",
disabled: b.value
}, {
default: j(() => [
r.$slots.default ? $(r.$slots, "default", { key: 0 }, void 0, !0) : (c(), u(X, { key: 1 }, [
ne(I(r.label), 1)
], 64))
]),
_: 3
}, 8, ["size", "type", "disabled"])),
P(g("input", {
ref_key: "radioRef",
ref: l,
type: e.mode,
class: "z-radio__original",
tabindex: "-1",
name: e.name,
value: s.value,
"onUpdate:modelValue": v[0] || (v[0] = (O) => f.value = O),
disabled: b.value,
checked: d.value
}, null, 8, Pn), [
[$t, f.value]
])
], 2));
}
}), G = /* @__PURE__ */ S(Dn, [["__scopeId", "data-v-2a03ca50"]]);
G.install = function(e) {
e.component(G.name, G);
};
const Ln = { class: "z-radio-group" }, Rn = /* @__PURE__ */ Object.assign({
name: "ZRadioGroup"
}, {
__name: "radio-group",
props: /* @__PURE__ */ T({
disabled: Boolean,
size: {
type: String,
validator: (e) => Q.includes(e)
},
min: Number,
max: Number,
mode: {
type: String,
default: "radio",
validator: (e) => vt.includes(e)
}
}, {
modelValue: {
type: [String, Number, Boolean, Array]
},
modelModifiers: {}
}),
emits: /* @__PURE__ */ T(["change"], ["update:modelValue"]),
setup(e, { emit: a }) {
const t = e, n = R(e, "modelValue"), o = a;
return K(ft, {
modelValue: n,
props: t,
changeEvent: (s) => {
n.value = s, o("update:modelValue", s), o("change", s);
}
}), (s, i) => (c(), u("div", Ln, [
$(s.$slots, "default", {}, void 0, !0)
]));
}
}), ie = /* @__PURE__ */ S(Rn, [["__scopeId", "data-v-d0253828"]]);
ie.install = function(e) {
e.component(ie.name, ie);
};
const Ie = /* @__PURE__ */ Object.assign({
name: "ZRadioButton"
}, {
__name: "radio-button",
setup(e) {
return (a, t) => (c(), N(W(_(G)), { shape: "button" }, {
default: j(() => [
$(a.$slots, "default")
]),
_: 3
}));
}
});
Ie.install = function(e) {
e.component(Ie.name, Ie);
};
const je = /* @__PURE__ */ Object.assign({
name: "ZCheckbox"
}, {
__name: "checkbox",
setup(e) {
return (a, t) => (c(), N(W(_(G)), { mode: "checkbox" }, {
default: j(() => [
$(a.$slots, "default")
]),
_: 3
}));
}
});
je.install = function(e) {
e.component(je.name, je);
};
const Ze = /* @__PURE__ */ Object.assign({
name: "ZCheckboxGroup"
}, {
__name: "checkbox-group",
setup(e) {
return (a, t) => (c(), N(W(_(ie)), { mode: "checkbox" }, {
default: j(() => [
$(a.$slots, "default")
]),
_: 3
}));
}
});
Ze.install = function(e) {
e.component(Ze.name, Ze);
};
const Te = /* @__PURE__ */ Object.assign({
name: "ZCheckboxButton"
}, {
__name: "checkbox-button",
setup(e) {
return (a, t) => (c(), N(W(_(G)), {
mode: "checkbox",
shape: "button"
}, {
default: j(() => [
$(a.$slots, "default")
]),
_: 3
}));
}
});
Te.install = function(e) {
e.component(Te.name, Te);
};
const An = /* @__PURE__ */ Object.assign({
name: "ZSlider"
}, {
__name: "slider",
props: /* @__PURE__ */ T({
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
disabled: Boolean,
step: {
type: Number,
default: 1
},
tooltip: {
type: [Boolean, Function]
}
}, {
modelValue: {
type: Number,
default: 0
},
modelModifiers: {}
}),
emits: /* @__PURE__ */ T(["change"], ["update:modelValue"]),
setup(e, { emit: a }) {
const t = e, n = k(null), o = k(!1), l = R(e, "modelValue"), s = y(() => {
let r = (l.value - t.min) / (t.max - t.min) * 100;
return r < 0 ? r = 0 : r > 100 && (r = 100), `${r}%`;
}), i = y(() => (t.max - t.min) / t.step), m = y(() => Math.max(...[t.max, t.min, t.step].map((r) => {
const [, v] = `${r}`.split(".");
return v ? v.length : 0;
}))), d = a, h = (r) => {
const v = n.value.getBoundingClientRect().left, O = n.value.clientWidth;
let B = (r - v) / O * 100;
B < 0 ? B = 0 : B > 100 && (B = 100), l.value = +(t.min + Math.round(i.value * B / 100) * t.step).toFixed(m.value);
}, b = (r) => {
var O, B;
if (t.disabled) return;
const v = ((B = (O = r.touches) == null ? void 0 : O.item(0)) == null ? void 0 : B.clientX) ?? r.clientX;
h(v), d("change", l.value);
}, z = (r) => {
var O, B;
const v = ((B = (O = r.touches) == null ? void 0 : O.item(0)) == null ? void 0 : B.clientX) ?? r.clientX;
h(v);
}, p = () => {
o.value = !1, d("change", l.value), window.removeEventListener("mousemove", z), window.removeEventListener("mouseup", p), window.removeEventListener("contextmenu", p);
}, f = (r) => {
t.disabled || (o.value = !0, r.preventDefault(), window.addEventListener("mousemove", z), window.addEventListener("mouseup", p), window.addEventListener("contextmenu", p));
};
return (r, v) => (c(), u("div", {
class: x(["z-slider", {
"is-disabled": e.disabled
}])
}, [
g("div", {
ref_key: "slider",
ref: n,
class: "z-slider__rail",
onMousedown: b
}, [
g("div", {
class: "z-slider__track",
style: M({
width: s.value
})
}, null, 4),
(c(), N(W(e.tooltip ? _(se) : "div"), {
class: x(["z-slider__handle", {
dragging: o.value
}]),
content: `${l.value}`,
style: M({
left: s.value
}),
onMousedown: f
}, null, 40, ["class", "content", "style"]))
], 544)
], 2));
}
}), Ve = /* @__PURE__ */ S(An, [["__scopeId", "data-v-5be37584"]]);
Ve.install = function(e) {
e.component(Ve.name, Ve);
};
const Hn = (e) => (me("data-v-9389012c"), e = e(), fe(), e), Kn = { class: "z-switch__label" }, Wn = /* @__PURE__ */ Hn(() => /* @__PURE__ */ g("span", { class: "z-switch__handle" }, null, -1)), Fn = ["name", "value", "disabled"], Xn = /* @__PURE__ */ Object.assign({
name: "ZSwitch"
}, {
__name: "switch",
props: /* @__PURE__ */ T({
value: [String, Number],
name: String,
disabled: Boolean
}, {
modelValue: {
type: Boolean
},
modelModifiers: {}
}),
emits: /* @__PURE__ */ T(["change"], ["update:modelValue"]),
setup(e, { emit: a }) {
const t = Z(), n = e, o = y(() => n.value ?? Y()), l = R(e, "modelValue"), s = a, i = () => {
s("change", l.value);
};
return (m, d) => (c(), u("label", {
class: x(["z-switch", {
"is-bold": _(t).isBold,
"is-checked": l.value,
"is-disabled": e.disabled
}])
}, [
g("span", Kn, I(l.value ? "ON" : "OFF"), 1),
Wn,
P(g("input", {
type: "checkbox",
class: "z-switch__input",
tabindex: "-1",
name: e.name,
value: o.value,
"onUpdate:modelValue": d[0] || (d[0] = (h) => l.value = h),
disabled: e.disabled,
onChange: i
}, null, 40, Fn), [
[xt, l.value]
])
], 2));
}
}), Me = /* @__PURE__ */ S(Xn, [["__scopeId", "data-v-9389012c"]]);
Me.install = function(e) {
e.component(Me.name, Me);
};
const qn = [
"letter-spacing",
"line-height",
"padding-top",
"padding-bottom",
"font-family",
"font-weight",
"font-size",
"text-rendering",
"text-transform",
"width",
"text-indent",
"padding-left",
"padding-right",
"border-width",
"border-style",
"box-sizing"
], Yn = `
visibility:hidden !important;
overflow:hidden !important;
position:absolute !important;
z-index:-1000 !important;
top:0 !important;
right:0 !important;
word-break:break-word;
`, Gn = (e) => {
if (!e) return;
const a = window.getComputedStyle(e), t = qn.map((l) => `${l}:${a.getPropertyValue(l)}`).join(";"), n = document.createElement("div");
document.body.appendChild(n), n.setAttribute("style", `${t};${Yn}`), n.innerText = e.value || e.placeholder || "ZENLESS";
const o = n.offsetHeight;
return document.body.removeChild(n), o;
}, Un = ["name", "rows", "tabindex", "disabled", "maxlength", "minlength", "placeholder", "autocomplete", "autofocus", "readonly"], Jn = {
key: 0,
class: "z-input__prepend"
}, Qn = ["type", "name", "tabindex", "disabled", "maxlength", "minlength", "placeholder", "autocomplete", "autofocus", "readonly"], ea = {
key: 3,
class: "z-input__append"
}, ta = /* @__PURE__ */ Object.assign({
name: "ZInput"
}, {
__name: "input",
props: /* @__PURE__ */ T({
value: [String, Number],
type: {
type: String,
default: "text"
},
name: String,
disabled: Boolean,
rows: [String, Number],
tabindex: [String, Number],
maxlength: [String, Number],
minlength: [String, Number],
placeholder: String,
clearable: Boolean,
size: {
type: String,
validator: (e) => Q.includes(e)
},
prefixIcon: String,
suffixIcon: String,
autocomplete: {
type: String,
default: "off"
},
autofocus: Boolean,
readonly: Boolean,
textAlign: String,
autoSize: Boolean
}, {
modelValue: {
type: [String, Number]
},
modelModifiers: {}
}),
emits: /* @__PURE__ */ T(["focus", "blur", "change", "input", "clear"], ["update:modelValue"]),
setup(e, { emit: a }) {
const t = Z(), n = e, o = R(e, "modelValue"), l = k(null), s = k(null), i = k(), m = k(!n.disabled && !n.readonly && n.autofocus), d = k(!1), h = y(() => n.clearable && (o.value || n.value) && !n.disabled && (m.value || d.value)), b = k(!1), z = y(() => n.type === "password" && (o.value || n.value || !n.disabled && !n.readonly && (m.value || d.value))), p = a, f = (w) => {
Ye(() => {
const E = l.value || s.value;
E && E.value !== w && (E.value = w);
});
};
J(() => n.value, (w) => {
et(w) && f(w);
}, {
immediate: !0
});
const r = () => {
if (n.type === "textarea" && n.autoSize) {
const w = Gn(l.value);
i.value !== w && (i.value = w);
}
};
Ue(() => {
r(), o.value && f(o.value);
});
const v = (w) => {
m.value = !0, p("focus", w);
}, O = (w) => {
m.value = !1, p("blur", w);
}, B = (w) => {
p("change", w.target.value);
}, F = (w) => {
o.value = w.target.value, f(w.target.value), Ye(r), p("input", w.target.value);
}, be = () => {
b.value = !b.value;
}, ee = () => {
o.value = "", f(""), p("input", ""), p("change", ""), p("clear", "");
};
return (w, E) => (c(), u("div", {
class: x(["z-input", {
"z-textarea": e.type === "textarea",
[`z-input--${e.size}`]: e.size,
"is-bold": _(t).isBold,
"is-focused": m.value,
"is-disabled": e.disabled,
"is-readonly": e.readonly
}]),
onMouseenter: E[2] || (E[2] = (ht) => d.value = !0),
onMouseleave: E[3] || (E[3] = (ht) => d.value = !1)
}, [
e.type === "textarea" ? (c(), u("textarea", {
key: 0,
ref_key: "textareaRef",
ref: l,
class: x(["z-textarea__inner", {
"is-bold": _(t).isBold
}]),
style: M({
height: `${i.value}px`,
textAlign: e.textAlign
}),
name: e.name,
rows: e.rows,
tabindex: e.tabindex,
disabled: e.disabled,
maxlength: e.maxlength,
minlength: e.minlength,
placeholder: e.placeholder,
autocomplete: e.autocomplete,
autofocus: e.autofocus,
readonly: e.readonly,
onFocus: v,
onBlur: O,
onChange: B,
onInput: F
}, null, 46, Un)) : (c(), u(X, { key: 1 }, [
w.$slots.prepend ? (c(), u("div", Jn, [
$(w.$slots, "prepend", {}, void 0, !0)
])) : C("", !0),
w.$slots.prefix || e.prefixIcon ? (c(), u("div", {
key: 1,
class: "z-input__prefix",
onMousedown: E[0] || (E[0] = te(() => {
}, ["prevent"]))
}, [
w.$slots.prefix ? $(w.$slots, "prefix", { key: 0 }, void 0, !0) : e.prefixIcon ? (c(), u("i", {
key: 1,
class: x(`z-icon-${e.prefixIcon}`)
}, null, 2)) : C("", !0)
], 32)) : C("", !0),
g("input", {
ref_key: "inputRef",
ref: s,
class: x(["z-input__inner", {
"is-bold": _(t).isBold
}]),
style: M({ textAlign: e.textAlign }),
type: e.type === "password" ? b.value ? "text" : "password" : e.type,
name: e.name,
tabindex: e.tabindex,
disabled: e.disabled,
maxlength: e.maxlength,
minlength: e.minlength,
placeholder: e.placeholder,
autocomplete: e.autocomplete,
autofocus: e.autofocus,
readonly: e.readonly,
onFocus: v,
onBlur: O,
onChange: B,
onInput: F
}, null, 46, Qn),
z.value || h.value || w.$slots.suffix || e.suffixIcon ? (c(), u("div", {
key: 2,
class: "z-input__suffix",
onMousedown: E[1] || (E[1] = te(() => {
}, ["prevent"]))
}, [
z.value ? (c(), u("i