ayovue
Version:
A progressive vue components library designed to simplify and accelerate your web development process.
1,313 lines (1,312 loc) • 39.7 kB
JavaScript
import { defineComponent as N, computed as T, withDirectives as U, openBlock as s, createElementBlock as r, normalizeClass as z, normalizeStyle as _, renderSlot as A, unref as Y, createElementVNode as n, vModelCheckbox as we, toDisplayString as k, createCommentVNode as E, ref as B, createBlock as ne, Transition as se, withCtx as te, vShow as ue, useSlots as ke, watch as he, withModifiers as K, mergeProps as ge, vModelDynamic as Se, Fragment as G, renderList as ae, createVNode as oe, createTextVNode as R, vModelRadio as Ce, getCurrentInstance as Fe, onMounted as Ve, vModelText as Te, withKeys as pe, Teleport as Ae, TransitionGroup as ze, reactive as Be } from "vue";
const Ee = {
type: String,
default: "text",
validator(e) {
return [
"",
"text",
"number",
"email",
"password",
"search",
"url",
"tel",
"date",
"time",
"range",
"color"
].includes(e);
}
}, J = {
type: [String, Number],
default: 16,
validator(e) {
return Number(e) == e;
}
}, _e = {
type: [Number, String],
default: 188
}, W = {
type: String,
default: ""
}, ye = {
type: String,
default: () => "input-" + Math.ceil(Math.random() * 1e5)
}, Le = {
type: [String, Number],
default: ""
}, x = {
type: Boolean,
default: !1
}, ve = {
type: [Boolean, Function],
default: !1
}, Ne = {
type: [String, Array, Object, Number, Date, Boolean],
default: ""
}, Oe = {
type: Array,
default: []
}, Me = {
type: [String, Function],
default: "name"
}, De = {
type: [String, Function],
default: "value"
}, Pe = {
type: String,
default: "name"
}, Re = {
type: String,
default: "options"
}, He = {
type: String,
default: "100%"
}, Ie = {
type: String,
default: "auto"
}, le = {
type: String,
default: "primary",
validator(e) {
return ["", "primary", "secondary", "warning", "danger", "success", "info"].includes(e);
}
}, je = {
type: String,
default: "1/1"
};
function me(e) {
var t;
this.getElementsByClassName("a-ripple").length > 0 && ((t = this.querySelector(".a-ripple")) == null || t.remove());
const a = document.createElement("span");
this.appendChild(a);
const u = Math.max(this.clientWidth, this.clientHeight);
a.style.width = a.style.height = u + "px", a.style.left = e.offsetX - u / 2 + "px", a.style.top = e.offsetY - u / 2 + "px", a.classList.add("a-ripple"), a.addEventListener("animationend", () => {
a.remove();
});
}
const We = {
mounted(e) {
e.addEventListener("click", me);
},
beforeUnmount(e) {
e.removeEventListener("click", me);
}
}, be = /* @__PURE__ */ N({
__name: "AButton",
props: {
variant: le,
size: J,
loading: x,
outlined: x,
raised: x,
rounded: x,
flat: x,
text: x,
icon: x,
block: x,
loaderClass: {
type: String,
default: "a-loading"
}
},
setup(e) {
const a = e, u = T(() => ({
"a-button": !0,
[`a-${a.variant}`]: !0,
[a.loaderClass]: a.loading,
"a-outlined": a.outlined,
"a-raised": a.raised,
"a-rounded": a.rounded,
"a-flat": a.flat,
"a-text": a.text,
"a-icon": a.icon,
"a-block": a.block
}));
return (t, y) => U((s(), r("button", {
class: z(u.value),
style: _({ "font-size": `${e.size}px` }),
type: "button"
}, [
A(t.$slots, "default")
], 6)), [
[Y(We)]
]);
}
}), Ue = /* @__PURE__ */ N({
__name: "AButtonGroup",
props: {
size: J,
raised: x,
rounded: x,
flat: x
},
setup(e) {
return (a, u) => (s(), r("div", {
class: z({
"a-button-group": !0,
"a-raised": e.raised,
"a-rounded": e.rounded,
"a-flat": e.flat
}),
style: _({ fontSize: e.size + "px" })
}, [
A(a.$slots, "default")
], 6));
}
}), Ke = ["value", "disabled"], qe = { key: 0 }, Xe = /* @__PURE__ */ N({
__name: "ACheckbox",
props: {
modelValue: [Boolean, Array],
value: {
type: [String, Number, Boolean, Array, Object, Date, Function, Symbol]
},
size: {
type: Number,
default: 16
},
label: {
type: String
},
variant: {
type: String,
default: "primary"
},
outlined: {
type: Boolean,
default: !1
},
rounded: {
type: Boolean,
default: !1
},
disabled: Boolean
},
emits: ["update:modelValue", "click", "change"],
setup(e, { emit: a }) {
const u = e, t = T({
get: () => u.modelValue,
set: (v) => {
a("update:modelValue", v);
}
}), y = T(() => ({
solid: !u.outlined,
rounded: u.rounded
}));
return (v, i) => (s(), r("label", {
class: z({ "a-labeled-checkbox": !0, [`a-${u.variant}`]: !0 }),
style: _({ fontSize: e.size + "px" })
}, [
U(n("input", {
type: "checkbox",
"onUpdate:modelValue": i[0] || (i[0] = (f) => t.value = f),
class: z(["a-checkbox", y.value]),
value: e.value,
onClick: i[1] || (i[1] = (f) => v.$emit("click", f)),
onChange: i[2] || (i[2] = (f) => v.$emit("change", f)),
disabled: e.disabled
}, null, 42, Ke), [
[we, t.value]
]),
e.label ? (s(), r("span", qe, k(e.label), 1)) : E("", !0)
], 6));
}
}), Ge = /* @__PURE__ */ N({
__name: "ACollapse",
props: {
open: x
},
setup(e) {
const a = B("auto");
function u(t) {
a.value = t.scrollHeight + "px";
}
return (t, y) => (s(), ne(se, {
name: "collapse",
onEnter: u
}, {
default: te(() => [
U(n("div", {
style: _({ "--height": a.value })
}, [
A(t.$slots, "default")
], 4), [
[ue, e.open]
])
]),
_: 3
}));
}
}), Ye = ["onClick", "onCancel"], Je = {
key: 0,
class: "a-dialog-header"
}, Qe = { class: "a-dialog-title" }, Ze = { class: "a-dialog-close" }, et = { class: "a-dialog-body" }, tt = {
key: 0,
class: "a-dialog-footer"
}, lt = /* @__PURE__ */ N({
__name: "ADialog",
props: {
modelValue: x,
title: W,
width: {
type: String,
default: "800px"
},
closeOnOutsideClick: x,
hideHeader: x
},
emits: ["update:modelValue"],
setup(e, { expose: a, emit: u }) {
const t = e, y = ke(), v = B(null);
function i(c) {
var g;
if (t.closeOnOutsideClick) {
const m = (g = v.value) == null ? void 0 : g.getBoundingClientRect();
m.top <= c.clientY && c.clientY <= m.top + m.height && m.left <= c.clientX && c.clientX <= m.left + m.width || f();
}
}
he(
() => t.modelValue,
(c) => {
var g;
c ? (g = v.value) == null || g.showModal() : f();
}
);
function f() {
t.modelValue && u("update:modelValue", !1);
}
function h() {
u("update:modelValue", !0);
}
return a({ close: f, open: h }), (c, g) => (s(), ne(se, {
name: "dialog",
onAfterLeave: g[1] || (g[1] = (m) => {
var O;
return (O = v.value) == null ? void 0 : O.close();
})
}, {
default: te(() => [
U(n("dialog", {
class: "a-dialog",
ref_key: "dialogEl",
ref: v,
onClick: K(i, ["stop"]),
style: _({ width: e.width || "500px" }),
onCancel: K(f, ["prevent"])
}, [
A(c.$slots, "header", { close: f }, () => [
e.hideHeader ? E("", !0) : (s(), r("div", Je, [
n("div", Qe, k(e.title), 1),
n("div", Ze, [
n("div", {
class: "a-icon-close a-action-btn",
onClick: g[0] || (g[0] = (m) => f())
})
])
]))
]),
n("div", et, [
A(c.$slots, "default")
]),
Y(y).footer ? (s(), r("div", tt, [
A(c.$slots, "footer", { close: f })
])) : E("", !0)
], 44, Ye), [
[ue, e.modelValue]
])
]),
_: 3
}));
}
}), at = ["type", "placeholder", "disabled", "name"], ot = /* @__PURE__ */ N({
__name: "AInput",
props: {
type: Ee,
floatingLabel: W,
modelValue: Le,
size: J,
variant: le,
clearable: x,
placeholder: W,
disabled: x,
name: ye,
class: W
},
emits: ["update:modelValue"],
setup(e, { expose: a, emit: u }) {
const t = e, y = B(), v = B(), i = B(!1), f = T(() => t.modelValue || i.value), h = T(() => {
var F, L, D;
return !v.value || !y.value ? {} : f.value ? {
top: "var(--floating-pos-top, -1.5em)",
left: "var(--floating-pos-left, 0.15em)",
zIndex: "1"
} : {
top: ((F = v.value) == null ? void 0 : F.offsetTop) + "px",
left: ((L = v.value) == null ? void 0 : L.offsetLeft) + "px",
height: ((D = v.value) == null ? void 0 : D.clientHeight) + "px"
};
});
function c() {
u("update:modelValue", "");
}
const g = T({
get() {
return t.modelValue;
},
set(F) {
u("update:modelValue", F);
}
});
function m() {
var F;
(F = v.value) == null || F.focus();
}
function O() {
var F;
(F = v.value) == null || F.blur();
}
return a({
clearValue: c,
isFocused: i,
focus: m,
blur: O
}), (F, L) => (s(), r("div", {
class: z({
"a-input": !0,
[`a-${e.variant}`]: !0,
"a-input-is-floating": f.value
}),
ref_key: "inputParentEl",
ref: y,
style: _({ fontSize: `${e.size || 16}px` })
}, [
e.floatingLabel ? (s(), r("span", {
key: 0,
class: "a-fl-label",
style: _(h.value)
}, k(e.floatingLabel), 5)) : E("", !0),
A(F.$slots, "prepend"),
U(n("input", ge({
onFocus: L[0] || (L[0] = (D) => i.value = !0),
onBlur: L[1] || (L[1] = (D) => i.value = !1),
ref_key: "inputFieldEl",
ref: v,
type: e.type,
class: "a-input-field",
placeholder: e.placeholder,
"onUpdate:modelValue": L[2] || (L[2] = (D) => g.value = D),
disabled: e.disabled,
autocomplete: "off",
name: e.name
}, F.$attrs), null, 16, at), [
[Se, g.value]
]),
A(F.$slots, "append"),
e.clearable && e.modelValue ? (s(), r("button", {
key: 1,
class: "a-icon-close a-action-btn",
onClick: c
})) : E("", !0)
], 6));
}
}), it = ["id", "name", "accept", "multiple"], nt = ["for"], st = /* @__PURE__ */ n("div", { class: "a-file-upload-icon a-icon-upload" }, null, -1), ut = /* @__PURE__ */ n("div", { class: "" }, "Drag & Drop files here", -1), rt = [
st,
ut
], dt = { key: 1 }, ct = { class: "a-file-mf-item" }, ft = ["onClick"], pt = { class: "a-file-mf-item-image" }, vt = ["src", "alt"], mt = {
key: 1,
class: "a-file-unknown-file"
}, ht = { class: "a-file-mf-name" }, gt = { class: "a-file-mf-size" }, yt = { class: "a-file-addmore" }, bt = ["src", "alt"], $t = {
key: 1,
class: "a-file-common-preview"
}, xt = /* @__PURE__ */ n("div", { class: "a-icon-file a-file-thumbnail" }, null, -1), wt = { class: "a-cf-size" }, kt = { class: "a-file-hover-header" }, St = ["for"], Ct = {
key: 0,
class: "a-file-hover-footer"
}, Ft = /* @__PURE__ */ N({
__name: "AInputFile",
props: {
variant: le,
size: J,
outlined: x,
raised: x,
rounded: x,
accept: W,
width: He,
aspectRatio: je,
name: ye,
multiple: x
},
emits: ["change", "drop"],
setup(e, { expose: a, emit: u }) {
const t = e, y = T(() => ({
"a-file": !0,
[`a-${t.variant}`]: !0,
"a-outlined": t.outlined
})), v = B(null);
B("");
const i = B({ raw: null }), f = B([]);
function h(p) {
const w = p.target;
!w.files || !w.files[0] || (c(w == null ? void 0 : w.files), u("change", p));
}
function c(p) {
const w = Array.from(p);
if (t.multiple)
w.forEach((S) => {
let M = g(S);
M.fileName && f.value.push(M);
});
else {
let S = g(p[0]);
S.fileName && (i.value = S);
}
}
function g(p) {
let w = { raw: p }, S = "";
p.size > 1024 * 1024 ? S = Math.ceil(p.size / 1024 / 1024) + "MB" : S = Math.ceil(p.size / 1024) + "KB";
const M = p.name.split(".");
if (M.length == 1)
return w;
const Q = M[M.length - 1];
let q = M.slice(0, M.length - 1).join("."), Z = p.name;
Z.length > 16 && (Z = q.slice(0, 10) + "..." + q.slice(-3) + "." + Q);
let ee = p.type.split("/")[0];
return w.fileSize = S, w.fileName = Z, w.fileType = ee, w.fileExtension = Q, ee === "image" && (w.blobURL = URL.createObjectURL(p)), w;
}
function m() {
i.value = { raw: null };
}
function O() {
document.querySelector("#" + t.name);
}
function F(p) {
var S;
p.preventDefault();
const w = (S = p.dataTransfer) == null ? void 0 : S.files;
c(w), u("drop", p);
}
function L(p) {
f.value.splice(p, 1);
}
function D() {
var p;
(p = v.value) == null || p.click();
}
function H() {
return b();
}
function b() {
return t.multiple ? f.value : i.value;
}
return a({
getFile: H,
getFiles: b
}), (p, w) => (s(), r("div", {
class: z(["", y.value]),
style: _({
fontSize: `${e.size || 16}px`,
width: e.width,
aspectRatio: e.aspectRatio
}),
onDragover: w[0] || (w[0] = K(() => {
}, ["prevent"])),
onDrop: F
}, [
n("input", {
id: e.name,
name: e.name,
type: "file",
class: "a-file-input",
onChange: h,
ref_key: "fileEl",
ref: v,
accept: e.accept,
multiple: e.multiple,
capture: ""
}, null, 40, it),
!e.multiple && !i.value.raw || e.multiple && f.value.length === 0 ? (s(), r("label", {
key: 0,
class: "a-file-label",
for: e.name
}, rt, 8, nt)) : (s(), r("div", dt, [
e.multiple ? (s(), r(G, { key: 0 }, [
(s(!0), r(G, null, ae(f.value, (S, M) => (s(), r("div", ct, [
n("div", {
class: "a-file-remove a-icon-circle-with-cross",
onClick: (Q) => L(M)
}, null, 8, ft),
n("div", pt, [
S.fileType == "image" ? (s(), r("img", {
key: 0,
src: S.blobURL,
alt: `.${S.fileExtension}`,
style: { "max-width": "100%" }
}, null, 8, vt)) : (s(), r("div", mt, k(S.fileExtension), 1))
]),
n("div", ht, [
n("div", null, k(S.fileName), 1),
n("div", gt, k(S.fileSize), 1)
])
]))), 256)),
n("div", yt, [
oe(Y(be), {
variant: "info",
outlined: "",
onClick: D
}, {
default: te(() => [
R(" Add More ")
]),
_: 1
})
])
], 64)) : (s(), r(G, { key: 1 }, [
i.value.raw && i.value.fileType === "image" ? (s(), r("img", {
key: 0,
src: i.value.blobURL,
alt: `${i.value.fileName}`,
class: "a-file-image-preview"
}, null, 8, bt)) : (s(), r("div", $t, [
xt,
n("div", null, k(i.value.fileName), 1),
n("div", wt, k(i.value.fileSize), 1)
])),
i.value.raw ? (s(), r("div", {
key: 2,
class: z(["a-file-hover", {
"a-file-hover-forced": i.value.fileType !== "image"
}])
}, [
n("div", kt, [
n("label", {
class: "a-icon-pencil",
onClick: O,
for: e.name
}, null, 8, St),
n("div", {
class: "a-icon-close a-file-close",
click: "resetFile",
style: { cursor: "pointer" },
onClick: m
})
]),
i.value.fileType === "image" ? (s(), r("div", Ct, [
n("span", null, k(i.value.fileName), 1),
n("span", null, k(i.value.fileSize), 1)
])) : E("", !0)
], 2)) : E("", !0)
], 64))
]))
], 38));
}
}), Vt = ["name", "value", "disabled"], Tt = /* @__PURE__ */ N({
__name: "ARadio",
props: {
name: {
type: String,
required: !0
},
modelValue: {
type: String,
required: !0
},
label: {
type: String
},
variant: {
type: String,
default: "primary"
},
value: {
type: String,
required: !0
},
size: {
type: Number,
default: 16
},
disabled: Boolean,
pt: {
type: Object,
default: () => ({})
}
},
emits: ["update:modelValue", "click", "change"],
setup(e, { emit: a }) {
const u = e, t = T({
get: () => u.modelValue,
set: (y) => {
a("update:modelValue", y);
}
});
return (y, v) => (s(), r("label", {
class: z(["a-radio", ["a-" + e.variant]]),
style: _({ fontSize: e.size + "px" })
}, [
U(n("input", ge({
type: "radio",
name: e.name,
value: e.value,
"onUpdate:modelValue": v[0] || (v[0] = (i) => t.value = i),
disabled: e.disabled
}, e.pt), null, 16, Vt), [
[Ce, t.value]
]),
n("span", null, k(e.label), 1)
], 6));
}
}), At = ["aria-activedescendant"], zt = { key: 0 }, Bt = {
key: 1,
class: "a-placeholder"
}, Et = ["onClick"], _t = {
key: 0,
class: "a-select-filter d-flex ai-center jc-between"
}, Lt = /* @__PURE__ */ n("div", { class: "a-icon-search a-select-search-icon" }, null, -1), Nt = ["id", "onMouseover", "onClick", "aria-selected"], Ot = ["id", "onClick", "onMouseover", "aria-selected"], Mt = { key: 0 }, Dt = /* @__PURE__ */ N({
__name: "ASelect",
props: {
variant: le,
// documented
clearable: x,
// documented
labelField: Me,
// documented
valueField: De,
// documented
showSearchField: ve,
// documented
floatingLabel: W,
// documented
modelValue: Ne,
// documented
size: J,
// documented
isDisabled: ve,
// documented
width: Ie,
//
options: Oe,
// documented
placeholder: W,
// documented
autofocus: x,
// documented
scrollHeight: _e,
// documented
grouped: x,
// documented
groupedLabelField: Pe,
// documented
groupedOptionsField: Re,
// documented
groupByField: W,
loading: x
// documented
},
emits: ["update:modelValue", "aChange", "blur", "focus"],
setup(e, { expose: a, emit: u }) {
const t = e, y = T(() => ({
"a-input": !0,
"a-select": !0,
[`a-${t.variant}`]: !0,
"a-input-is-floating": D.value,
"a-input-is-disabled": (typeof t.isDisabled == "function" ? t.isDisabled(I.value) : t.isDisabled) || t.loading,
"a-loading": t.loading
})), v = Fe(), i = (l) => {
let o = "";
if (Array.isArray(l)) {
const d = l.map((C) => i(C));
o = JSON.stringify(d);
} else if (typeof l == "object" && l !== null) {
const d = {};
Object.keys(l).sort().forEach((C) => {
d[C] = i(l[C]);
}), o = JSON.stringify(d);
} else
o = l;
return o;
}, f = B(null), h = B(null), c = B(null), g = B(null), m = B(!1), O = B(!1), F = T(() => Number(t.scrollHeight || 188));
function L() {
var l;
(l = h.value) == null || l.focus(), w(), u("focus");
}
const D = T(() => t.modelValue || m.value), H = T(() => t.grouped || typeof t.options[0] == "object" ? "object" : "string"), b = T(() => {
let l = {};
return t.grouped ? t.options.forEach((o) => {
const d = o[t.groupedLabelField], C = o[t.groupedOptionsField];
l[i(d)] = {
_optionType: "group-title",
_label: d
}, C.forEach((V) => {
const X = typeof V == "string" ? { _value: V } : V;
let j = V;
t.labelField && typeof t.labelField == "string" ? j = V[t.labelField] : t.labelField && typeof t.labelField == "function" && (j = t.labelField(V)), t.valueField ? typeof t.valueField == "function" ? l[i(t.valueField(V))] = {
...X,
_label: j
} : l[i(V[t.valueField])] = {
...X,
_label: j
} : l[i(V)] = { ...X, _label: j };
});
}) : H.value === "string" ? t.options.forEach((o) => {
l[i(o)] = o;
}) : t.options.forEach((o) => {
const d = typeof t.labelField == "string" ? o[t.labelField] : t.labelField(o);
t.valueField ? typeof t.valueField == "function" ? l[i(t.valueField(o))] = {
...o,
_label: d
} : l[i(o[t.valueField])] = {
...o,
_label: d
} : l[i(o)] = { ...o, _label: d };
}), l;
}), p = T(() => P.value ? Object.keys(b.value).filter((l) => H.value === "string" ? b.value[l].toLowerCase().indexOf(P.value.toLowerCase()) > -1 : b.value[l]._label.toLowerCase().indexOf(P.value.toLowerCase()) > -1 || b.value[l]._optionType === "group-title") : Object.keys(b.value));
function w() {
var V;
m.value = !m.value;
const l = c.value, d = ((V = c.value) == null ? void 0 : V.getBoundingClientRect()).top, C = innerHeight - d - l.offsetHeight;
O.value = C < Number(t.scrollHeight);
}
function S(l) {
setTimeout(() => {
var o;
(o = h.value) != null && o.contains(document.activeElement) || (m.value = !1), u("blur");
}, 111);
}
function M() {
var l;
(l = h.value) == null || l.focus();
}
function Q(l) {
l.stopPropagation();
}
function q(l) {
var d;
if (l._optionType === "group-title")
return;
(d = h.value) == null || d.focus();
let o = l;
l && l._value ? o = l._value : H.value === "object" && (t.valueField ? typeof t.valueField == "function" ? o = t.valueField(l) : o = l[t.valueField] : (o = { ...l }, delete o._key, delete o._label)), u("update:modelValue", o), u("aChange", l), m.value = !m.value, $e();
}
function Z(l) {
l.key === "ArrowDown" ? (l.preventDefault(), $.value = $.value < p.value.length - 1 ? $.value + 1 : 0, b.value[p.value[$.value]]._optionType === "group-title" && ($.value = $.value < p.value.length - 1 ? $.value + 1 : 0), ee()) : l.key === "ArrowUp" ? (l.preventDefault(), $.value = $.value > 0 ? $.value - 1 : p.value.length - 1, b.value[p.value[$.value]]._optionType === "group-title" && ($.value = $.value > 0 ? $.value - 1 : p.value.length - 1), ee()) : l.key === "Enter" ? $.value > -1 ? q(b.value[p.value[$.value]]) : m.value = !m.value : (l.code.startsWith("Key") || l.code.startsWith("Digit")) && (setTimeout(() => {
P.value || (P.value = l.key);
}, 0), setTimeout(() => {
var o;
(o = f.value) == null || o.focus();
}, 0));
}
function ee() {
setTimeout(() => {
var X, j, de;
const l = document.querySelector(
"#a-option" + (v == null ? void 0 : v.uid) + $.value
);
var o = (X = g.value) == null ? void 0 : X.getBoundingClientRect(), d = {
height: (j = g.value) == null ? void 0 : j.clientHeight,
width: (de = g.value) == null ? void 0 : de.clientWidth
}, C = l == null ? void 0 : l.getBoundingClientRect(), V = C.top >= o.top && C.bottom <= o.top + d.height;
if (!V) {
const ce = C.top - o.top, fe = C.bottom - o.bottom;
Math.abs(ce) < Math.abs(fe) ? g.value.scrollTop += ce : g.value.scrollTop += fe;
}
}, 111);
}
Ve(() => {
t.autofocus && L();
});
const $ = B(-1), P = B("");
he(P, (l, o) => {
$.value = -1;
});
function $e() {
P.value = "";
}
function re(l) {
l.stopPropagation(), u("update:modelValue", ""), u("aChange", {});
}
const xe = T(() => {
var l, o, d;
return !c.value || !h.value ? {} : D.value ? {
top: "var(--floating-pos-top, -1.5em)",
left: "var(--floating-pos-left, 0.15em)",
zIndex: "1"
} : {
top: ((l = c.value) == null ? void 0 : l.offsetTop) + "px",
left: ((o = c.value) == null ? void 0 : o.offsetLeft) + "px",
height: ((d = c.value) == null ? void 0 : d.clientHeight) + "px"
};
}), I = T(() => {
if (H.value === "string" || !t.modelValue)
return t.modelValue;
const l = i(t.modelValue);
return b.value[l];
});
return a({
clearValue: re,
isFocused: m,
focus: L,
blur: S
}), (l, o) => (s(), r("div", {
class: z(y.value),
style: _({ width: e.width || "auto", fontSize: `${e.size || 16}px` }),
ref_key: "inputParentEl",
ref: h,
"aria-label": "Select Box",
tabindex: "-1",
role: "listbox",
onBlur: S,
onClick: w,
onKeydown: Z,
"aria-activedescendant": "a-option" + l.$.uid + $.value
}, [
e.floatingLabel ? (s(), r("span", {
key: 0,
class: "a-fl-label",
style: _(xe.value)
}, k(e.floatingLabel), 5)) : E("", !0),
A(l.$slots, "prepend"),
n("div", {
ref_key: "inputFieldEl",
ref: c,
class: "a-input-field a-select-field"
}, [
e.modelValue && I.value ? (s(), r("div", zt, [
A(l.$slots, "selected", { selectedOption: I.value }, () => [
R(k(H.value === "string" ? I.value : I.value._label), 1)
])
])) : e.floatingLabel ? E("", !0) : (s(), r("div", Bt, k(e.placeholder), 1))
], 512),
A(l.$slots, "append"),
e.clearable && e.modelValue ? (s(), r("div", {
key: 1,
class: "a-icon-close a-action-btn",
onClick: K(re, ["prevent"])
}, null, 8, Et)) : E("", !0),
n("div", {
class: z(["a-icon-chevron-down a-action-btn", { "a-rotated-180": m.value }])
}, null, 2),
oe(se, { name: "dropdown" }, {
default: te(() => [
U(n("div", {
class: z(["a-select-dropdown", { "a-select-dropdown-top": O.value }]),
onClick: Q
}, [
P.value || (typeof e.showSearchField == "function" ? e.showSearchField(I.value) : e.showSearchField) ? (s(), r("div", _t, [
Lt,
U(n("input", {
type: "text",
placeholder: "Search",
class: "a-select-filter-input flex-1",
"onUpdate:modelValue": o[0] || (o[0] = (d) => P.value = d),
onBlur: M,
ref_key: "filterInputEl",
ref: f
}, null, 544), [
[Te, P.value]
])
])) : E("", !0),
n("div", {
class: "a-select-dropdown-fixed",
ref_key: "scrollEl",
ref: g,
style: _({ maxHeight: F.value + "px" })
}, [
H.value === "string" ? (s(!0), r(G, { key: 0 }, ae(p.value, (d, C) => (s(), r("div", {
id: "a-option" + l.$.uid + C,
key: d,
class: z(["a-select-option", {
"a-select-option-active": e.modelValue === b.value[d],
"a-select-option-hovered": $.value === C
}]),
onMouseover: (V) => $.value = C,
onMouseleave: o[1] || (o[1] = (V) => $.value = -1),
onClick: (V) => q(b.value[d]),
role: "option",
tabindex: "0",
"aria-selected": e.modelValue === b.value[d]
}, [
A(l.$slots, "option", {
option: b.value[d]
}, () => [
R(k(b.value[d]), 1)
])
], 42, Nt))), 128)) : (s(!0), r(G, { key: 1 }, ae(p.value, (d, C) => (s(), r("div", {
id: "a-option" + l.$.uid + C,
key: d,
class: z(["a-select-option", {
"a-select-option-active": I.value == b.value[d],
"a-select-option-hovered": $.value === C,
"a-select-option-grouped": (t.grouped || t.groupByField) && b.value[d]._optionType !== "group-title",
"a-select-option-grouped-title": b.value[d]._optionType === "group-title"
}]),
onClick: (V) => q(b.value[d]),
onMouseover: (V) => $.value = C,
tabindex: "0",
onMouseleave: o[2] || (o[2] = (V) => $.value = -1),
role: "option",
"aria-selected": I.value == b.value[d]
}, [
b.value[d]._optionType === "group-title" ? (s(), r("div", Mt, k(b.value[d]._label), 1)) : A(l.$slots, "option", {
key: 1,
option: b.value[d]
}, () => [
R(k(b.value[d]._label), 1)
])
], 42, Ot))), 128)),
p.value.length === 0 ? (s(), r("div", {
key: 2,
class: "text-center",
onClick: o[3] || (o[3] = (d) => m.value = !1)
}, " No option available ")) : E("", !0)
], 4)
], 2), [
[ue, m.value]
])
]),
_: 3
})
], 46, At));
}
}), Pt = /* @__PURE__ */ N({
__name: "ASpinner",
props: {
size: J,
variant: le
},
emits: [],
setup(e, { emit: a }) {
return (u, t) => (s(), r("div", {
class: z(`a-loading a-spinner a-${e.variant}`),
style: _({ fontSize: `${e.size || 16}px` })
}, null, 6));
}
}), Rt = ["aria-checked", "onKeydown", "aria-disabled"], Ht = { class: "invisible-text" }, It = { class: "invisible-text" }, jt = { class: "a-switch-label-wrapper" }, Wt = { class: "a-switch-label" }, Ut = { class: "a-switch-text" }, Kt = { class: "a-switch-circle" }, qt = { class: "a-switch-text" }, Xt = /* @__PURE__ */ N({
__name: "ASwitch",
props: {
modelValue: {
type: Boolean,
default: !1
},
onText: {
type: String,
default: " "
},
offText: {
type: String,
default: " "
},
onVariation: {
type: String,
default: "primary"
},
offVariation: {
type: String,
default: "secondary"
},
size: {
type: Number,
default: 16
},
disabled: Boolean
},
emits: ["update:modelValue"],
setup(e, { emit: a }) {
const u = e, t = () => {
u.disabled || a("update:modelValue", !Y(u.modelValue));
};
return (y, v) => (s(), r("div", {
class: z(["a-switch", {
[`a-${e.onVariation}`]: e.modelValue,
[`a-${e.offVariation}`]: !e.modelValue,
"a-switch-off": !e.modelValue
}]),
tabindex: "0",
onClick: t,
style: _({ fontSize: e.size + "px" }),
role: "switch",
"aria-checked": e.modelValue,
onKeydown: [
pe(K(t, ["prevent"]), ["space"]),
pe(K(t, ["prevent"]), ["enter"])
],
"aria-disabled": e.disabled
}, [
n("div", Ht, [
A(y.$slots, "on", {}, () => [
R(k(e.onText), 1)
])
]),
n("div", It, [
A(y.$slots, "off", {}, () => [
R(k(e.offText), 1)
])
]),
n("div", jt, [
n("div", Wt, [
n("div", Ut, [
A(y.$slots, "on", {}, () => [
R(k(e.onText), 1)
])
]),
n("div", Kt, [
A(y.$slots, "circle", {}, () => [
R(" ")
])
]),
n("div", qt, [
A(y.$slots, "off", {}, () => [
R(k(e.offText), 1)
])
])
])
])
], 46, Rt));
}
}), Gt = { class: "a-toast-icon" }, Yt = {
key: 0,
class: "a-icon-check"
}, Jt = {
key: 1,
class: "a-icon-warning"
}, Qt = {
key: 2,
class: "a-icon-danger"
}, Zt = {
key: 3,
class: "a-icon-info"
}, el = { class: "a-toast-content" }, tl = { class: "a-toast-heading" }, ll = /* @__PURE__ */ n("div", { class: "a-icon-close" }, null, -1), al = [
ll
], ol = /* @__PURE__ */ N({
__name: "AToast",
props: {
toast: {
type: Object,
default: () => ({})
}
},
emits: ["close"],
setup(e, { emit: a }) {
const u = e, t = T(() => ({
"a-toast": !0
}));
function y() {
a("close", u.toast);
}
return (v, i) => (s(), r("div", {
class: z(t.value)
}, [
n("div", Gt, [
e.toast.type === "success" ? (s(), r("div", Yt)) : E("", !0),
e.toast.type === "warning" ? (s(), r("div", Jt)) : E("", !0),
e.toast.type === "danger" ? (s(), r("div", Qt)) : E("", !0),
e.toast.type === "info" ? (s(), r("div", Zt)) : E("", !0)
]),
n("div", el, [
n("div", tl, k(e.toast.summary), 1),
n("div", {
class: "a-toast-body",
onClick: i[0] || (i[0] = K(() => {
}, ["stop"]))
}, [
A(v.$slots, "default", {}, () => [
R(k(e.toast.detail), 1)
])
])
]),
n("div", {
class: "a-toast-close",
onClick: y
}, al)
], 2));
}
}), il = { class: "a-toasts-container" }, nl = ["onAnimationend"], sl = /* @__PURE__ */ N({
__name: "AToasts",
props: {
position: {
type: String,
default: ""
},
group: {
type: String,
default: "default"
}
},
setup(e) {
const a = e, { toasts: u, removeToast: t } = ul(), y = T(() => Array.from(u).filter((c) => c.group === a.group || a.group === "default" && !c.group)), v = T(() => ({
"a-toasts": !0,
[`a-toasts-${a.position}`]: a.position
})), i = {
"top-left": "slide-right",
"bottom-left": "slide-right",
"top-center": "slide-bottom",
"bottom-center": "slide-top"
}, f = T(() => i[a.position] || "slide-left");
function h(c) {
t(c);
}
return (c, g) => (s(), ne(Ae, { to: "body" }, [
n("div", il, [
oe(ze, {
name: f.value,
tag: "div",
class: z(v.value)
}, {
default: te(() => [
(s(!0), r(G, null, ae(y.value, (m) => (s(), r("div", {
key: m.$when,
class: "p-relative"
}, [
n("div", {
class: z(["a-toast-type", { [`a-${m.type}`]: !0 }]),
style: { margin: "16px 11px", position: "relative" }
}, [
A(c.$slots, "default", {
toast: m,
close: Y(t)
}, () => [
oe(ol, {
toast: m,
onClose: Y(t)
}, null, 8, ["toast", "onClose"])
]),
n("div", {
id: "progress",
ref_for: !0,
ref: "progress",
class: "a-toast-progress",
style: _({
"--animation": `toastprogress ${m.duration / 1e3}s`
}),
onAnimationend: (O) => h(m)
}, null, 44, nl)
], 2)
]))), 128))
]),
_: 3
}, 8, ["name", "class"])
])
]));
}
}), ie = Be(/* @__PURE__ */ new Set()), ul = () => {
function e(u) {
const t = { ...u, $when: Date.now() + Math.random() };
ie.add(t);
}
function a(u) {
ie.delete(u);
}
return { toasts: ie, showToast: e, removeToast: a };
}, dl = {
mounted: (e, a) => {
if (!document.querySelector("#ayostyle")) {
const f = `.ayotooltip {
background: red;
padding: 7px 17px;
width: fit-content;
max-width: 200px;
border-radius: 6px;
background-color: #404040;
opacity: 0;
transition: opacity 1s;
color: #f3f3f3;
line-height: 1.2;
position: fixed;
z-index: 999999;
}
.ayotooltip::after {
content: "";
position: absolute;
left: calc(50% - 5px);
top: -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #404040;
z-index: 99999999;
}
.ayotooltip__left::after {
left: auto;
right: -10px;
top: calc(50% - 5px);
border-left: 5px solid #404040;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.ayotooltip__right::after {
right: auto;
left: -10px;
top: calc(50% - 5px);
border-right: 5px solid #404040;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.ayotooltip__top::after {
top: auto;
bottom: -10px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #404040;
border-bottom: 5px solid transparent;
}
`, h = document.head || document.getElementsByTagName("head")[0], c = document.createElement("style");
c.id = "ayostyle", h.appendChild(c), c.appendChild(document.createTextNode(f));
}
const t = document.createElement("div");
t.innerHTML = a.value || "Tooltip", t.classList.add("ayotooltip"), a.modifiers.left && t.classList.add("ayotooltip__left"), a.modifiers.right && t.classList.add("ayotooltip__right"), a.modifiers.top && t.classList.add("ayotooltip__top");
const y = (f) => {
document.body.appendChild(t), t.style.opacity = "0", setTimeout(() => {
t.style.opacity = "0.9";
}, 1);
const h = v(e);
t.style.left = h.left, t.style.top = h.top;
}, v = (f) => {
const h = f.getBoundingClientRect();
let c = "0px";
if (a.modifiers.left)
c = h.left - t.offsetWidth - 10 + "px";
else if (a.modifiers.right)
c = h.left + f.offsetWidth + 10 + "px";
else {
const m = h.left + f.offsetWidth / 2, F = h.left + t.offsetWidth / 2 - m;
c = h.left - F + "px";
}
let g = "0px";
return a.modifiers.top ? g = h.top - t.offsetHeight - 10 + "px" : a.modifiers.right || a.modifiers.left ? g = h.top - t.offsetHeight / 2 + f.offsetHeight / 2 + "px" : g = h.top + f.offsetHeight + 10 + "px", { left: c, top: g };
}, i = () => {
document.querySelectorAll(".ayotooltip").forEach((h) => {
h.remove();
});
};
e.addEventListener("mouseover", y, !1), e.addEventListener("mouseout", i, !1);
},
beforeMount(e) {
},
unmounted(e) {
},
updated(e) {
}
}, cl = {
install(e) {
e.component("AButton", be), e.component("AButtonGroup", Ue), e.component("ACheckbox", Xe), e.component("ACollapse", Ge), e.component("ADialog", lt), e.component("AInput", ot), e.component("AInputFile", Ft), e.component("ARadio", Tt), e.component("ASelect", Dt), e.component("ASpinner", Pt), e.component("ASwitch", Xt), e.component("AToasts", sl);
}
};
export {
be as AButton,
Ue as AButtonGroup,
Xe as ACheckbox,
Ge as ACollapse,
lt as ADialog,
ot as AInput,
Ft as AInputFile,
Tt as ARadio,
Dt as ASelect,
Pt as ASpinner,
Xt as ASwitch,
sl as AToasts,
cl as AyoVue,
cl as default,
ul as useToast,
We as vRipple,
dl as vTooltip
};