c883e79a2a
using vue 3.4.31 and oruga 0.8.12
14016 lines
430 KiB
JavaScript
14016 lines
430 KiB
JavaScript
var Al = Object.defineProperty;
|
|
var wl = (e, l, a) => l in e ? Al(e, l, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[l] = a;
|
|
var Sa = (e, l, a) => (wl(e, typeof l != "symbol" ? l + "" : l, a), a);
|
|
import { Comment as Dl, Text as xl, Fragment as ke, ref as z, toRaw as at, toValue as vt, getCurrentInstance as wt, effectScope as $l, isRef as dt, watch as fe, getCurrentScope as Bl, onScopeDispose as Ol, nextTick as xe, computed as n, onMounted as it, onBeforeUnmount as Tt, defineComponent as be, useSlots as Rt, resolveComponent as Ta, openBlock as f, createElementBlock as $, normalizeClass as P, unref as s, renderSlot as Z, createTextVNode as Ve, toDisplayString as ce, createCommentVNode as G, renderList as $e, createBlock as ie, resolveDynamicComponent as Ke, createSlots as It, withCtx as ue, createElementVNode as se, provide as Ra, inject as Ia, onUnmounted as za, normalizeStyle as et, mergeModels as Be, useModel as Ee, withDirectives as Oe, mergeProps as ye, vModelDynamic as Pl, vModelText as Ml, Teleport as ua, createVNode as me, Transition as tt, vShow as Ne, watchEffect as Ha, useAttrs as da, withKeys as he, withModifiers as ve, readonly as Vl, vModelCheckbox as Na, vModelSelect as Tl, render as Kt, toHandlers as ca, onBeforeMount as Rl, normalizeProps as $t, guardReactiveProps as Bt, vModelRadio as Il, h as zl, toHandlerKey as Hl } from "vue";
|
|
/*! Oruga v0.8.12 | MIT License | github.com/oruga-ui/oruga */
|
|
const ot = () => Math.random().toString(36).substring(2, 15);
|
|
function Nl(e) {
|
|
return e < 0 ? -1 : e > 0 ? 1 : 0;
|
|
}
|
|
const Ll = Math.sign || Nl, Wt = (e, l) => (e % l + l) % l;
|
|
function Fa(e, l, a) {
|
|
return Math.max(l, Math.min(a, e));
|
|
}
|
|
const lt = (e) => e && typeof e == "object" && !Array.isArray(e), Zt = (e) => e && e instanceof Date && !isNaN(e.getTime()), nt = (e) => e != null, kt = (e) => typeof e < "u" && e !== null ? e : "", St = (e) => nt(e) ? isNaN(e) ? e : e + "px" : null;
|
|
function _t(e, l, a) {
|
|
return e ? !a || typeof a != "function" ? e.indexOf(l) : e.findIndex((t, o, r) => a(t, r)) : -1;
|
|
}
|
|
function Vt(e, l) {
|
|
if (!e && l || e && !l)
|
|
return !1;
|
|
if (e === l)
|
|
return !0;
|
|
if (lt(e) && lt(l)) {
|
|
const a = Object.keys(e), t = Object.keys(l);
|
|
if (a.length !== t.length)
|
|
return !1;
|
|
for (const o of a) {
|
|
const r = e[o], u = l[o], c = lt(r) && lt(u);
|
|
if (c && !Vt(r, u) || !c && r !== u)
|
|
return !1;
|
|
}
|
|
return !0;
|
|
}
|
|
return Array.isArray(e) && Array.isArray(l) ? !(e.length !== l.length || !e.every((a, t) => a === l[t])) : !1;
|
|
}
|
|
function El(e) {
|
|
return Object.assign({}, e);
|
|
}
|
|
function mt(e, l, a = !1) {
|
|
return !lt(e) || !lt(l) ? l : a ? La(e, l) : Object.assign(e, l);
|
|
}
|
|
function La(e, l) {
|
|
return !lt(e) || !lt(l) ? l : (Object.getOwnPropertyNames(l).forEach((a) => {
|
|
const t = e[a], o = l[a];
|
|
Array.isArray(t) && Array.isArray(o) ? e[a] = t.concat(o) : lt(t) && lt(o) ? e[a] = La(
|
|
Object.assign({}, t),
|
|
o
|
|
) : e[a] = o;
|
|
}), e);
|
|
}
|
|
function ze(e, l, a) {
|
|
const t = l.split(".").reduce(
|
|
(o, r) => typeof o < "u" ? o[r] : void 0,
|
|
e
|
|
);
|
|
return typeof t < "u" ? t : a;
|
|
}
|
|
function Ea(e, l, a) {
|
|
const t = l.split(".");
|
|
if (t.length === 1) {
|
|
e[l] = a;
|
|
return;
|
|
}
|
|
const o = t[0];
|
|
return typeof e[o] > "u" && (e[o] = {}), Ea(e[o], t.slice(1).join("."), a);
|
|
}
|
|
function oa(e) {
|
|
typeof e.remove < "u" ? e.remove() : typeof e.parentNode < "u" && e.parentNode !== null && e.parentNode.removeChild(e);
|
|
}
|
|
function jl(e) {
|
|
return e && e.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
|
|
}
|
|
function Aa(e) {
|
|
return e && e.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
|
|
}
|
|
function ja(e) {
|
|
return !!(!e || e.type === Dl || e.type === xl && !e.children.trim() || e.type === ke && ja(e.children));
|
|
}
|
|
const ft = {
|
|
Android: () => typeof window < "u" && !!window.navigator.userAgent.match(/Android/i),
|
|
BlackBerry: () => typeof window < "u" && !!window.navigator.userAgent.match(/BlackBerry/i),
|
|
iOS: () => typeof window < "u" && !!window.navigator.userAgent.match(/iPhone|iPad|iPod/i),
|
|
Opera: () => typeof window < "u" && !!window.navigator.userAgent.match(/Opera Mini/i),
|
|
Windows: () => typeof window < "u" && !!window.navigator.userAgent.match(/IEMobile/i),
|
|
any: () => ft.Android() || ft.BlackBerry() || ft.iOS() || ft.Opera() || ft.Windows()
|
|
}, Wa = z({});
|
|
function Wl(e, l) {
|
|
Wa.value[e] = l;
|
|
}
|
|
function Yl() {
|
|
return Wa.value;
|
|
}
|
|
let zt;
|
|
const Ya = (e) => {
|
|
zt = e;
|
|
}, Kl = (e, l) => {
|
|
e.use(l);
|
|
}, Fe = (e, l) => {
|
|
e.component(l.name, l);
|
|
}, Ht = (e, l, a) => {
|
|
Ya(e);
|
|
const t = Yl();
|
|
Wl(l, a), e._context.provides && e._context.provides.oruga || e.provide("oruga", t), e.config.globalProperties.$oruga || (e.config.globalProperties.$oruga = t);
|
|
}, Ut = z({
|
|
iconPack: "mdi",
|
|
useHtml5Validation: !0,
|
|
statusIcon: !0,
|
|
transformClasses: void 0
|
|
}), Ka = (e) => {
|
|
Ut.value = e;
|
|
}, Yt = () => El(at(Ut.value)), i = (e, l) => ze(Ut.value, e, l), Ul = (e, l) => {
|
|
Ea(Ut.value, e, l);
|
|
}, ql = {
|
|
getOption: i,
|
|
getOptions: Yt,
|
|
setOption: Ul,
|
|
setOptions(e) {
|
|
Ka(mt(Yt(), e, !0));
|
|
}
|
|
}, Xl = {
|
|
install(e, l) {
|
|
Ya(e), Ka(mt(Yt(), l, !0));
|
|
}
|
|
}, Gl = {
|
|
sizes: {
|
|
default: "mdi-24px",
|
|
small: null,
|
|
medium: "mdi-36px",
|
|
large: "mdi-48px"
|
|
},
|
|
iconPrefix: "mdi-"
|
|
}, ht = () => {
|
|
const l = i("iconComponent") ? "" : "fa-";
|
|
return {
|
|
sizes: {
|
|
default: null,
|
|
small: null,
|
|
medium: "lg",
|
|
large: "2xl"
|
|
},
|
|
iconPrefix: l,
|
|
internalIcons: {
|
|
check: "check",
|
|
information: "info-circle",
|
|
alert: "exclamation-triangle",
|
|
"alert-circle": "exclamation-circle",
|
|
"arrow-up": "arrow-up",
|
|
"chevron-right": "angle-right",
|
|
"chevron-left": "angle-left",
|
|
"chevron-down": "angle-down",
|
|
"chevron-up": "angle-up",
|
|
eye: "eye",
|
|
"eye-off": "eye-slash",
|
|
"caret-down": "caret-down",
|
|
"caret-up": "caret-up",
|
|
"close-circle": "times-circle",
|
|
close: "times",
|
|
loading: "circle-notch"
|
|
}
|
|
};
|
|
}, Jl = () => {
|
|
let e = {
|
|
mdi: Gl,
|
|
fa: ht(),
|
|
fas: ht(),
|
|
far: ht(),
|
|
fad: ht(),
|
|
fab: ht(),
|
|
fal: ht()
|
|
};
|
|
const l = i("customIconPacks");
|
|
return l && (e = mt(e, l, !0)), e;
|
|
}, Ql = Jl;
|
|
function qe(e) {
|
|
const l = vt(e);
|
|
return (l == null ? void 0 : l.$el) ?? l;
|
|
}
|
|
const Xe = (e) => e ? e.flatMap(
|
|
(l) => Object.keys(l).filter((a) => a && l[a])
|
|
) : [];
|
|
function h(...e) {
|
|
const l = wt();
|
|
if (!l)
|
|
throw new Error(
|
|
"defineClasses must be called within a component setup function."
|
|
);
|
|
const a = $l(), t = z([]);
|
|
return t.value = e.map((o, r) => {
|
|
const u = o[0], c = o[1], y = o[2], d = o[3];
|
|
function v() {
|
|
const m = Zl(
|
|
l,
|
|
u,
|
|
c,
|
|
vt(y)
|
|
), k = !nt(d) || vt(d);
|
|
return { [m]: k };
|
|
}
|
|
return nt(y) && dt(y) && a.run(() => {
|
|
fe(
|
|
() => vt(y),
|
|
(m, k) => {
|
|
if (m === k)
|
|
return;
|
|
const b = v();
|
|
t.value[r] = b;
|
|
}
|
|
);
|
|
}), nt(d) && dt(d) && a.run(() => {
|
|
fe(
|
|
() => vt(d),
|
|
(m, k) => {
|
|
if (m === k)
|
|
return;
|
|
const b = t.value[r];
|
|
Object.keys(b).forEach(
|
|
(F) => b[F] = m
|
|
), t.value[r] = b;
|
|
}
|
|
);
|
|
}), v();
|
|
}), Bl() && Ol(() => {
|
|
a && a.stop();
|
|
}), t;
|
|
}
|
|
function Zl(e, l, a, t = "") {
|
|
var B;
|
|
const o = ea(e).props, r = (B = e.proxy) == null ? void 0 : B.$options.configField;
|
|
if (!r)
|
|
throw new Error("component must define the 'configField' option.");
|
|
const u = o.override === !0 ? {} : Yt(), c = o.override || ze(u, "override", !1), y = ze(
|
|
u,
|
|
`${r}.override`,
|
|
c
|
|
), d = ze(
|
|
u,
|
|
`${r}.${l}.override`,
|
|
y
|
|
), v = ze(
|
|
u,
|
|
"transformClasses",
|
|
void 0
|
|
), m = ze(
|
|
u,
|
|
`${r}.transformClasses`,
|
|
void 0
|
|
);
|
|
let k = ze(
|
|
u,
|
|
`${r}.${l}.class`,
|
|
""
|
|
) || ze(u, `${r}.${l}`, ""), b = ze(o, l, "");
|
|
if (Array.isArray(b) && (b = b.join(" ")), typeof b == "function") {
|
|
const S = ea(e);
|
|
b = b(t, S);
|
|
} else
|
|
b = wa(b, t);
|
|
if (Array.isArray(k) && (k = k.join(" ")), typeof k == "function") {
|
|
const S = ea(e);
|
|
k = k(t, S);
|
|
} else
|
|
k = wa(k, t);
|
|
a.includes("{*}") ? a = a.replace(
|
|
/\{\*\}/g,
|
|
kt(t)
|
|
) : a = a + kt(t);
|
|
let F = `${d ? "" : a} ${kt(k)} ${kt(b)}`.trim().replace(/\s\s+/g, " ");
|
|
return m ? F = m(F) : v && (F = v(F)), F;
|
|
}
|
|
function wa(e, l) {
|
|
return kt(e).split(" ").filter((a) => a.length > 0).map((a) => a + kt(l)).join(" ");
|
|
}
|
|
const ea = (e) => {
|
|
let l = e.proxy.$props;
|
|
return l = Object.keys(l).filter((a) => a.endsWith("Props")).map((a) => l[a]).reduce((a, t) => ({ ...a, ...t }), l), { props: l };
|
|
};
|
|
function st(e, l, a, t) {
|
|
const o = (t == null ? void 0 : t.eventName) || `update:${e.toString()}`;
|
|
if (t != null && t.passive) {
|
|
const r = z(l[e]);
|
|
let u = !1;
|
|
return fe(
|
|
() => l[e],
|
|
(c) => {
|
|
u || (u = !0, r.value = c, xe(() => u = !1));
|
|
}
|
|
), fe(
|
|
r,
|
|
(c) => {
|
|
(!u && c !== l[e] || t.deep) && a(o, c);
|
|
},
|
|
{ deep: t.deep }
|
|
), r;
|
|
} else
|
|
return n({
|
|
get() {
|
|
return l[e];
|
|
},
|
|
set(r) {
|
|
a(o, r);
|
|
}
|
|
});
|
|
}
|
|
function Nt(e, l, a) {
|
|
return st("modelValue", e, l, a);
|
|
}
|
|
function _e(e, l, a = document, t) {
|
|
let o;
|
|
const r = () => {
|
|
if (!a)
|
|
return;
|
|
const c = qe(a), y = lt(t) ? { ...t } : t;
|
|
c.addEventListener(e, l, y), o = () => c.removeEventListener(e, l, y);
|
|
}, u = () => {
|
|
typeof o == "function" && o();
|
|
};
|
|
return t != null && t.immediate ? r() : (it(() => r()), Tt(() => u())), u;
|
|
}
|
|
const Me = typeof window < "u", Ua = typeof window > "u";
|
|
function ct(e) {
|
|
var y;
|
|
const l = z(!1), a = z(), t = wt();
|
|
if (!t)
|
|
throw new Error(
|
|
"useMatchMedia must be called within a component setup function."
|
|
);
|
|
const o = t.props, r = (y = t.proxy) == null ? void 0 : y.$options.configField;
|
|
if (!r)
|
|
throw new Error("component must define the 'configField' option.");
|
|
let u = o.mobileBreakpoint;
|
|
if (!u) {
|
|
const d = i(
|
|
"mobileBreakpoint",
|
|
e || "1023px"
|
|
);
|
|
u = i(`${r}.mobileBreakpoint`, d);
|
|
}
|
|
a.value = Me ? window.matchMedia(`(max-width: ${u})`) : void 0, a.value ? (l.value = a.value.matches, _e("change", c, a.value)) : l.value = !1;
|
|
function c(d) {
|
|
l.value = d.matches;
|
|
}
|
|
return { isMobile: l };
|
|
}
|
|
const _l = ["for"], en = ["for"], qa = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OField",
|
|
configField: "field",
|
|
__name: "Field",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/**
|
|
* Color of the field and help message, also adds a matching icon.
|
|
* Used by Input, Select and Autocomplete.
|
|
* @values primary, info, success, warning, danger, and any other custom color
|
|
*/
|
|
variant: { type: String, default: void 0 },
|
|
/** Field label */
|
|
label: { type: String, default: void 0 },
|
|
/**
|
|
* Vertical size of input
|
|
* @values small, medium, large
|
|
*/
|
|
labelSize: {
|
|
type: String,
|
|
default: () => i("field.labelsize")
|
|
},
|
|
/** Same as native for set on the label */
|
|
labelFor: { type: String, default: void 0 },
|
|
/** Help message text */
|
|
message: { type: String, default: void 0 },
|
|
messageTag: {
|
|
type: [String, Object, Function],
|
|
default: () => i("field.messageTag", "p")
|
|
},
|
|
/**
|
|
* Direct child components/elements of Field will be grouped horizontally
|
|
* (see which ones at the top of the page).
|
|
*/
|
|
grouped: { type: Boolean, default: !1 },
|
|
/** Allow controls to fill up multiple lines, making it responsive */
|
|
groupMultiline: { type: Boolean, default: !1 },
|
|
/** Group label and control on the same line for horizontal forms */
|
|
horizontal: { type: Boolean, default: !1 },
|
|
/** Field automatically attach controls together */
|
|
addons: { type: Boolean, default: !0 },
|
|
/** Mobile breakpoint as max-width value */
|
|
mobileBreakpoint: {
|
|
type: String,
|
|
default: () => i("field.mobileBreakpoint")
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class to align label and control in horizontal forms */
|
|
horizontalClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class when fields are grouped together */
|
|
groupedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class when fields fill up multiple lines */
|
|
groupMultilineClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class for field label */
|
|
labelClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class for field label size */
|
|
labelSizeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class for field label when horizontal */
|
|
labelHorizontalClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class for field body */
|
|
bodyClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** "Class for field body when horizontal */
|
|
bodyHorizontalClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class for components automatically attached together when inside a field */
|
|
addonsClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class for the field message */
|
|
messageClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the message field variant */
|
|
variantMessageClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the label field variant */
|
|
variantLabelClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of file component when on mobile */
|
|
mobileClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class for the focused field */
|
|
focusedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class for the filled field */
|
|
filledClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
setup(e) {
|
|
const l = e, { isMobile: a } = ct(l.mobileBreakpoint), t = z(l.labelFor);
|
|
fe(
|
|
() => l.labelFor,
|
|
(g) => t.value = g
|
|
);
|
|
const o = z(l.variant);
|
|
fe(
|
|
() => l.variant,
|
|
(g) => o.value = g
|
|
);
|
|
const r = z(l.message);
|
|
fe(
|
|
() => l.message,
|
|
(g) => r.value = g
|
|
), fe(
|
|
() => r.value,
|
|
(g) => {
|
|
var w;
|
|
(w = d == null ? void 0 : d.value) != null && w.hasInnerField && (d.value.fieldVariant || d.value.setVariant(o.value), d.value.fieldMessage || d.value.setMessage(g));
|
|
}
|
|
);
|
|
const u = z(!1), c = z(!1), y = z(!1), { parentField: d } = qt();
|
|
d != null && d.value && d.value.addInnerField();
|
|
const v = Rt(), m = n(() => l.label || !!v.label), k = n(() => !!r.value || !!v.message), b = n(
|
|
() => l.grouped || l.groupMultiline || y.value || F.value
|
|
), F = n(
|
|
() => l.addons && !l.horizontal && !!v.default
|
|
);
|
|
function B(g) {
|
|
const w = g();
|
|
return w.length === 1 && Array.isArray(w[0].children) ? w[0].children : w;
|
|
}
|
|
const S = z();
|
|
function C() {
|
|
y.value = !0;
|
|
}
|
|
function p(g) {
|
|
u.value = g;
|
|
}
|
|
function V(g) {
|
|
c.value = g;
|
|
}
|
|
function T(g) {
|
|
o.value = g;
|
|
}
|
|
function I(g) {
|
|
r.value = g;
|
|
}
|
|
function E(g) {
|
|
t.value = g;
|
|
}
|
|
const K = n(() => ({
|
|
$el: S.value,
|
|
props: l,
|
|
hasInnerField: y.value,
|
|
hasMessage: k.value,
|
|
fieldVariant: o.value,
|
|
fieldMessage: r.value,
|
|
addInnerField: C,
|
|
setInputId: E,
|
|
setFocus: p,
|
|
setFilled: V,
|
|
setVariant: T,
|
|
setMessage: I
|
|
}));
|
|
tn(K);
|
|
const te = h(
|
|
["rootClass", "o-field"],
|
|
[
|
|
"horizontalClass",
|
|
"o-field--horizontal",
|
|
null,
|
|
n(() => !!l.horizontal)
|
|
],
|
|
["mobileClass", "o-field--mobile", null, a],
|
|
["focusedClass", "o-field--focused", null, u],
|
|
["filledClass", "o-field--filled", null, c]
|
|
), O = h(
|
|
["messageClass", "o-field__message"],
|
|
[
|
|
"variantMessageClass",
|
|
"o-field__message-",
|
|
o,
|
|
n(() => !!o.value)
|
|
]
|
|
), D = h(
|
|
["labelClass", "o-field__label"],
|
|
[
|
|
"labelSizeClass",
|
|
"o-field__label-",
|
|
n(() => l.labelSize),
|
|
n(() => !!l.labelSize)
|
|
],
|
|
[
|
|
"variantLabelClass",
|
|
"o-field__label-",
|
|
o,
|
|
n(() => !!o.value)
|
|
]
|
|
), M = h([
|
|
"labelHorizontalClass",
|
|
"o-field__horizontal-label"
|
|
]), Y = h(["bodyClass", "o-field__body"]), J = h([
|
|
"bodyHorizontalClass",
|
|
"o-field__horizontal-body"
|
|
]), j = h(
|
|
["rootClass", "o-field"],
|
|
[
|
|
"groupMultilineClass",
|
|
"o-field--grouped-multiline",
|
|
null,
|
|
n(() => l.groupMultiline)
|
|
],
|
|
["groupedClass", "o-field--grouped", null, n(() => l.grouped)],
|
|
[
|
|
"addonsClass",
|
|
"o-field--addons",
|
|
null,
|
|
n(() => !l.grouped && F.value)
|
|
]
|
|
);
|
|
return (g, w) => {
|
|
const x = Ta("OField");
|
|
return f(), $("div", {
|
|
ref_key: "rootRef",
|
|
ref: S,
|
|
"data-oruga": "field",
|
|
class: P(s(te))
|
|
}, [
|
|
e.horizontal ? (f(), $("div", {
|
|
key: 0,
|
|
class: P(s(M))
|
|
}, [
|
|
m.value ? (f(), $("label", {
|
|
key: 0,
|
|
for: t.value,
|
|
class: P(s(D))
|
|
}, [
|
|
Z(g.$slots, "label", { label: e.label }, () => [
|
|
Ve(ce(e.label), 1)
|
|
])
|
|
], 10, _l)) : G("", !0)
|
|
], 2)) : (f(), $(ke, { key: 1 }, [
|
|
m.value ? (f(), $("label", {
|
|
key: 0,
|
|
for: t.value,
|
|
class: P(s(D))
|
|
}, [
|
|
Z(g.$slots, "label", { label: e.label }, () => [
|
|
Ve(ce(e.label), 1)
|
|
])
|
|
], 10, en)) : G("", !0)
|
|
], 64)),
|
|
e.horizontal ? (f(), $("div", {
|
|
key: 2,
|
|
class: P(s(J))
|
|
}, [
|
|
(f(!0), $(ke, null, $e(B(g.$slots.default), (R, _) => (f(), $(ke, { key: _ }, [
|
|
s(ja)(R) ? (f(), ie(Ke(R), { key: 0 })) : (f(), ie(x, {
|
|
key: 1,
|
|
variant: o.value,
|
|
addons: !1,
|
|
"message-tag": e.messageTag,
|
|
"message-class": e.messageClass
|
|
}, It({
|
|
default: ue(() => [
|
|
(f(), ie(Ke(R)))
|
|
]),
|
|
_: 2
|
|
}, [
|
|
_ === 0 ? {
|
|
name: "message",
|
|
fn: ue(() => [
|
|
Z(g.$slots, "message", { message: r.value }, () => [
|
|
Ve(ce(r.value), 1)
|
|
])
|
|
]),
|
|
key: "0"
|
|
} : void 0
|
|
]), 1032, ["variant", "message-tag", "message-class"]))
|
|
], 64))), 128))
|
|
], 2)) : b.value ? (f(), $("div", {
|
|
key: 3,
|
|
class: P(s(Y))
|
|
}, [
|
|
se("div", {
|
|
class: P(s(j))
|
|
}, [
|
|
Z(g.$slots, "default")
|
|
], 2)
|
|
], 2)) : Z(g.$slots, "default", { key: 4 }),
|
|
k.value && !e.horizontal ? (f(), ie(Ke(e.messageTag), {
|
|
key: 5,
|
|
class: P(s(O))
|
|
}, {
|
|
default: ue(() => [
|
|
Z(g.$slots, "message", { message: r.value }, () => [
|
|
Ve(ce(r.value), 1)
|
|
])
|
|
]),
|
|
_: 3
|
|
}, 8, ["class"])) : G("", !0)
|
|
], 2);
|
|
};
|
|
}
|
|
}), Xa = Symbol("FielData");
|
|
function tn(e) {
|
|
Ra(Xa, e);
|
|
}
|
|
function qt() {
|
|
const e = Ia(Xa, void 0), l = n(() => {
|
|
var o;
|
|
if ((o = e == null ? void 0 : e.value) != null && o.fieldVariant) {
|
|
if (typeof e.value.fieldVariant == "string")
|
|
return e.value.fieldVariant;
|
|
if (Array.isArray(e.value.fieldVariant)) {
|
|
for (const r in e.value.fieldVariant)
|
|
if (e.value.fieldVariant[r])
|
|
return r;
|
|
}
|
|
}
|
|
}), a = n(
|
|
() => {
|
|
var o;
|
|
return (o = e.value) != null && o.hasMessage ? e.value.fieldMessage : "";
|
|
}
|
|
), t = n(() => i("statusVariantIcon", {
|
|
success: "check",
|
|
danger: "alert-circle",
|
|
info: "information",
|
|
warning: "alert"
|
|
})[l.value] || "");
|
|
return {
|
|
parentField: e,
|
|
statusVariant: l,
|
|
statusVariantIcon: t,
|
|
statusMessage: a
|
|
};
|
|
}
|
|
const an = Ua ? [] : [
|
|
HTMLButtonElement,
|
|
HTMLFieldSetElement,
|
|
HTMLInputElement,
|
|
HTMLObjectElement,
|
|
HTMLOutputElement,
|
|
HTMLSelectElement,
|
|
HTMLTextAreaElement
|
|
];
|
|
function Da(e) {
|
|
return an.some((l) => e instanceof l) ? e : null;
|
|
}
|
|
const ln = [
|
|
"disabled",
|
|
"required",
|
|
"pattern",
|
|
"maxlength",
|
|
"minlength",
|
|
"max",
|
|
"min",
|
|
"step"
|
|
];
|
|
function rt(e, l, a) {
|
|
const { parentField: t } = qt(), o = n(() => {
|
|
const S = qe(e);
|
|
if (!S)
|
|
return;
|
|
if (S.getAttribute("data-oruga-input"))
|
|
return S;
|
|
const C = S.querySelector("[data-oruga-input]");
|
|
if (!C) {
|
|
console.warn(
|
|
"useInputHandler: Underlaying Oruga input component not found"
|
|
);
|
|
return;
|
|
}
|
|
return C;
|
|
}), r = n(() => {
|
|
const S = o.value;
|
|
return S || console.warn("useInputHandler: inputRef contains no element"), S;
|
|
}), u = z(!1);
|
|
function c() {
|
|
xe(() => {
|
|
r.value && r.value.focus();
|
|
});
|
|
}
|
|
function y() {
|
|
xe(() => {
|
|
r.value && r.value.click();
|
|
});
|
|
}
|
|
function d(S) {
|
|
u.value = !1, t != null && t.value && t.value.setFocus(!1), l("blur", S), b();
|
|
}
|
|
function v(S) {
|
|
u.value = !0, t != null && t.value && t.value.setFocus(!0), l("focus", S);
|
|
}
|
|
const m = z(!0);
|
|
function k(S, C) {
|
|
xe(() => {
|
|
t != null && t.value && (t.value.props.variant || t.value.setVariant(S), t.value.props.message || t.value.setMessage(C));
|
|
});
|
|
}
|
|
function b() {
|
|
a.useHtml5Validation && r.value && (r.value.validity.valid ? (k(null, null), m.value = !0) : (F(), m.value = !1));
|
|
}
|
|
function F() {
|
|
const S = "danger", C = a.validationMessage || r.value.validationMessage;
|
|
k(S, C);
|
|
}
|
|
function B(S) {
|
|
b();
|
|
const C = Da(S.target);
|
|
if (C && (t != null && t.value) && a.useHtml5Validation) {
|
|
S.preventDefault();
|
|
let p = !1;
|
|
if (C.form != null) {
|
|
const V = C.form.elements;
|
|
for (let T = 0; T < V.length; ++T) {
|
|
const I = Da(
|
|
V.item(T)
|
|
);
|
|
if (I != null && I.willValidate && !I.validity.valid) {
|
|
p = C === I;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
if (p) {
|
|
const V = t.value.$el, T = i("invalidHandler");
|
|
if (T instanceof Function)
|
|
T(C, V);
|
|
else {
|
|
const I = V ? V.scrollIntoView != null : !1;
|
|
C.focus({ preventScroll: I }), I && V.scrollIntoView({ block: "nearest" });
|
|
}
|
|
}
|
|
}
|
|
l("invalid", S);
|
|
}
|
|
if (!Ua) {
|
|
const S = () => {
|
|
m.value || b();
|
|
};
|
|
let C = null;
|
|
fe(
|
|
[o, m, () => a.useHtml5Validation],
|
|
(p) => {
|
|
const V = p[0], T = p[1], I = p[2];
|
|
if (C != null && (C.takeRecords().length > 0 && S(), C.disconnect()), !nt(V) || T || !I)
|
|
return;
|
|
C == null && (C = new MutationObserver(
|
|
S
|
|
)), C.observe(V, {
|
|
attributeFilter: ln
|
|
});
|
|
let E = V;
|
|
for (; E = E.parentNode; )
|
|
E instanceof HTMLFieldSetElement && C.observe(E, {
|
|
attributeFilter: ["disabled"]
|
|
});
|
|
},
|
|
{ immediate: !0 }
|
|
);
|
|
}
|
|
return {
|
|
input: r,
|
|
isFocused: u,
|
|
isValid: m,
|
|
setFocus: c,
|
|
doClick: y,
|
|
onFocus: v,
|
|
onBlur: d,
|
|
checkHtml5Validity: b,
|
|
onInvalid: B
|
|
};
|
|
}
|
|
function ia(e, l, a) {
|
|
let t;
|
|
return (...o) => {
|
|
const r = () => {
|
|
t = null, a || e.apply(this, o);
|
|
}, u = a && !t;
|
|
clearTimeout(t), t = setTimeout(r, l), u && e.apply(this, o);
|
|
};
|
|
}
|
|
function gt(e, l) {
|
|
var m;
|
|
const a = wt();
|
|
if (!a)
|
|
throw new Error(
|
|
"useProviderChild must be called within a component setup function."
|
|
);
|
|
const t = (m = a.proxy) == null ? void 0 : m.$options.configField, o = (l == null ? void 0 : l.key) || t, r = z([]), u = z(1), c = n(
|
|
() => r.value.slice().sort((k, b) => k.index - b.index)
|
|
);
|
|
function y(k) {
|
|
const b = r.value.length, F = v(), B = { index: b, data: k, identifier: F };
|
|
return r.value.push(B), e != null && e.value && xe(() => {
|
|
const S = r.value.map((T) => `[data-id="${o}-${T.identifier}"]`).join(","), p = qe(e).querySelectorAll(S), V = Array.from(p).map(
|
|
(T) => T.getAttribute("data-id").replace(`${o}-`, "")
|
|
);
|
|
r.value.forEach(
|
|
(T) => T.index = V.indexOf(`${T.identifier}`)
|
|
);
|
|
}), B;
|
|
}
|
|
function d(k) {
|
|
r.value = r.value.filter((b) => b !== k);
|
|
}
|
|
function v() {
|
|
return String(u.value++);
|
|
}
|
|
return Ra("$o-" + o, {
|
|
registerItem: y,
|
|
unregisterItem: d,
|
|
data: l == null ? void 0 : l.data
|
|
}), {
|
|
childItems: r,
|
|
sortedItems: c
|
|
};
|
|
}
|
|
function yt(e = { needParent: !0 }) {
|
|
var y;
|
|
const l = wt();
|
|
if (!l)
|
|
throw new Error(
|
|
"useProviderChild must be called within a component setup function."
|
|
);
|
|
const a = (y = l.proxy) == null ? void 0 : y.$options.configField, t = (e == null ? void 0 : e.key) || a, o = Ia(
|
|
"$o-" + t,
|
|
void 0
|
|
), r = e.needParent !== !1, u = e.register !== !1;
|
|
if (r && !o)
|
|
throw new Error(
|
|
`You should wrap ${l.proxy.$options.name} in a ${t} component`
|
|
);
|
|
const c = z();
|
|
return o && u && (c.value = o.registerItem(e.data)), za(() => {
|
|
o && c.value && o.unregisterItem(c.value);
|
|
}), { parent: o == null ? void 0 : o.data, item: c };
|
|
}
|
|
function Xt(e, l, a, t = { cancelOptions: ["escape", "outside"] }) {
|
|
const o = wt();
|
|
if (!o)
|
|
throw new Error(
|
|
"useProgrammaticComponent must be called within a component setup function."
|
|
);
|
|
const r = st("active", l, a), u = n(
|
|
() => typeof l.cancelable == "boolean" ? l.cancelable ? t.cancelOptions : [] : l.cancelable
|
|
);
|
|
function c() {
|
|
return typeof e == "function" ? e() : e.value;
|
|
}
|
|
const y = n(
|
|
() => typeof l.container == "string" ? document.querySelector(l.container) : l.container || document.body
|
|
);
|
|
it(() => {
|
|
if (l.programmatic) {
|
|
l.programmatic.instances && l.programmatic.instances.add(o);
|
|
const k = c();
|
|
y.value.appendChild(k), r.value = !0;
|
|
}
|
|
}), Me && _e("keyup", d, y.value);
|
|
function d(k) {
|
|
r.value && (k.key === "Escape" || k.key === "Esc") && v("escape");
|
|
}
|
|
function v(k) {
|
|
!l.cancelable || !r.value || u.value.indexOf(k) < 0 || (l.onCancel.apply(null), m({ action: "cancel", method: k }));
|
|
}
|
|
function m(...k) {
|
|
o.emit("close"), l.onClose.apply(null, k), l.programmatic ? (l.programmatic.instances && l.programmatic.instances.remove(o), l.programmatic.resolve && l.programmatic.resolve.apply(null, k), setTimeout(() => {
|
|
if (o.props.active = !1, o.emit("update:active", !1), typeof t.destroyOnHide > "u" || t.destroyOnHide)
|
|
if (Me)
|
|
window.requestAnimationFrame(() => {
|
|
const b = c();
|
|
b && oa(b);
|
|
});
|
|
else {
|
|
const b = c();
|
|
b && oa(b);
|
|
}
|
|
})) : (o.props.active = !1, o.emit("update:active", !1));
|
|
}
|
|
return { close: m, cancel: v, isActive: r, container: y };
|
|
}
|
|
function fa(e, l, a = []) {
|
|
if (!window)
|
|
return;
|
|
const t = (u) => a.some((c) => {
|
|
if (typeof c == "string")
|
|
return Array.from(
|
|
window.document.querySelectorAll(c)
|
|
).some(
|
|
(y) => y === u.target || u.composedPath().includes(y)
|
|
);
|
|
{
|
|
const y = qe(c);
|
|
return y && (u.target === y || u.composedPath().includes(y));
|
|
}
|
|
});
|
|
return _e("click", (u) => {
|
|
const c = qe(e);
|
|
!c || c === u.target || u.composedPath().includes(c) || t(u) || l(u);
|
|
}, window, {
|
|
immediate: !0,
|
|
passive: !0
|
|
});
|
|
}
|
|
function nn(e) {
|
|
if (e.style.position === "fixed" || !e)
|
|
return document.documentElement;
|
|
let l = !1, a = e.parentElement;
|
|
for (; !l && nt(a) && a !== document.documentElement; ) {
|
|
const { overflow: t, overflowY: o } = getComputedStyle(a), { scrollHeight: r, clientHeight: u } = a;
|
|
if (l = /(auto|scroll)/.test(`${t}${o}`) && r > u, l)
|
|
break;
|
|
a = a.parentElement;
|
|
}
|
|
return a;
|
|
}
|
|
const Te = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OIcon",
|
|
configField: "icon",
|
|
__name: "Icon",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** Icon component name */
|
|
component: {
|
|
type: String,
|
|
default: () => i("iconComponent")
|
|
},
|
|
/**
|
|
* Icon pack to use
|
|
* @values mdi, fa, fas and any other custom icon pack
|
|
*/
|
|
pack: {
|
|
type: String,
|
|
default: () => i("iconPack", "mdi")
|
|
},
|
|
/**
|
|
* Color of the icon
|
|
* @values primary, info, success, warning, danger, and any other custom color
|
|
*/
|
|
variant: {
|
|
type: String,
|
|
default: () => i("icon.variant")
|
|
},
|
|
/** Icon name */
|
|
icon: { type: String, default: void 0 },
|
|
/**
|
|
* Icon size
|
|
* @values small, medium, large
|
|
*/
|
|
size: {
|
|
type: String,
|
|
default: () => i("icon.size")
|
|
},
|
|
/**
|
|
* Overrides icon font size
|
|
* @values Depends on library: null (smallest), fa-sm, fa-lg, fa-xl, mdi-18px, mdi-24px, mdi-36px, mdi-48px
|
|
*/
|
|
customSize: { type: String, default: void 0 },
|
|
/**
|
|
* Add class to icon font.
|
|
* See icon library documentation for custom classes.
|
|
*/
|
|
customClass: { type: String, default: void 0 },
|
|
/** When true makes icon clickable */
|
|
clickable: { type: Boolean, default: !1 },
|
|
/** Enable spin effect on icon */
|
|
spin: { type: Boolean, default: !1 },
|
|
/** Rotation 0-360 */
|
|
rotation: { type: [Number, String], default: void 0 },
|
|
/**
|
|
* This is used internally
|
|
* @ignore
|
|
*/
|
|
both: { type: Boolean, default: !1 },
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the icon when clickable */
|
|
clickableClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the element when spin */
|
|
spinClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the icon size */
|
|
sizeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the icon variant */
|
|
variantClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
setup(e) {
|
|
const l = e, a = n(() => {
|
|
const m = {};
|
|
return l.rotation && (m.transform = `rotate(${l.rotation}deg)`), m;
|
|
}), t = n(() => Ql()[l.pack]), o = n(
|
|
() => {
|
|
var m;
|
|
return (m = t.value) != null && m.iconPrefix ? t.value.iconPrefix : "";
|
|
}
|
|
), r = n(() => {
|
|
var m;
|
|
if ((m = t.value) != null && m.sizes) {
|
|
if (l.size && t.value.sizes[l.size] !== void 0)
|
|
return t.value.sizes[l.size];
|
|
if (t.value.sizes.default)
|
|
return t.value.sizes.default;
|
|
}
|
|
return null;
|
|
}), u = n(
|
|
() => `${o.value}${d(l.icon)}`
|
|
), c = n(() => l.customSize || r.value), y = n(() => {
|
|
if (!l.variant)
|
|
return;
|
|
let m = "";
|
|
return typeof l.variant == "string" ? m = l.variant : m = Object.keys(l.variant).filter(
|
|
(k) => l.variant[k]
|
|
)[0], m;
|
|
});
|
|
function d(m) {
|
|
var k, b;
|
|
return l.both && (k = t.value) != null && k.internalIcons && (b = t.value) != null && b.internalIcons[m] ? t.value.internalIcons[m] : m;
|
|
}
|
|
const v = h(
|
|
["rootClass", "o-icon"],
|
|
[
|
|
"clickableClass",
|
|
"o-icon--clickable",
|
|
null,
|
|
n(() => l.clickable)
|
|
],
|
|
["spinClass", "o-icon--spin", null, n(() => l.spin)],
|
|
[
|
|
"sizeClass",
|
|
"o-icon--",
|
|
n(() => l.size),
|
|
n(() => !!l.size)
|
|
],
|
|
[
|
|
"variantClass",
|
|
"o-icon--",
|
|
y,
|
|
n(() => !!y.value)
|
|
]
|
|
);
|
|
return (m, k) => (f(), $("span", {
|
|
class: P(s(v)),
|
|
"data-oruga": "icon",
|
|
style: et(a.value)
|
|
}, [
|
|
e.component ? (f(), ie(Ke(e.component), {
|
|
key: 0,
|
|
icon: [e.pack, u.value],
|
|
size: c.value,
|
|
class: P([e.customClass])
|
|
}, null, 8, ["icon", "size", "class"])) : (f(), $("i", {
|
|
key: 1,
|
|
class: P([e.pack, u.value, c.value, e.customClass])
|
|
}, null, 2))
|
|
], 6));
|
|
}
|
|
}), on = ["id", "data-oruga-input", "type", "maxlength", "autocomplete", "placeholder", "disabled"], sn = ["id", "maxlength", "placeholder", "disabled"], Ft = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OInput",
|
|
configField: "input",
|
|
inheritAttrs: !1,
|
|
__name: "Input",
|
|
props: /* @__PURE__ */ Be({
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** @model */
|
|
modelValue: { type: [String, Number], default: "" },
|
|
/**
|
|
* Input type, like native
|
|
* @values Any native input type, and textarea
|
|
*/
|
|
type: { type: String, default: "text" },
|
|
/**
|
|
* Size of the control
|
|
* @values small, medium, large
|
|
*/
|
|
size: {
|
|
type: String,
|
|
default: () => i("input.size")
|
|
},
|
|
/**
|
|
* Color of the control
|
|
* @values primary, info, success, warning, danger, and any other custom color
|
|
*/
|
|
variant: {
|
|
type: String,
|
|
default: () => i("input.variant")
|
|
},
|
|
/** Input placeholder */
|
|
placeholder: { type: String, default: void 0 },
|
|
/** Makes input full width when inside a grouped or addon field */
|
|
expanded: { type: Boolean, default: !1 },
|
|
/** Makes the element rounded */
|
|
rounded: { type: Boolean, default: !1 },
|
|
/** Same as native disabled */
|
|
disabled: { type: Boolean, default: !1 },
|
|
/** Adds the reveal password functionality */
|
|
passwordReveal: { type: Boolean, default: !1 },
|
|
/** Same as native maxlength, plus character counter */
|
|
maxlength: { type: [Number, String], default: void 0 },
|
|
/** Show character counter when maxlength prop is passed */
|
|
counter: {
|
|
type: Boolean,
|
|
default: () => i("input.counter", !1)
|
|
},
|
|
/** Automatically adjust height in textarea */
|
|
autosize: { type: Boolean, default: !1 },
|
|
/**
|
|
* Icon pack to use
|
|
* @values mdi, fa, fas and any other custom icon pack
|
|
*/
|
|
iconPack: {
|
|
type: String,
|
|
default: () => i("input.iconPack", void 0)
|
|
},
|
|
/** Icon to be shown */
|
|
icon: {
|
|
type: String,
|
|
default: () => i("input.icon", void 0)
|
|
},
|
|
/** Makes the icon clickable */
|
|
iconClickable: { type: Boolean, default: !1 },
|
|
/** Icon to be added on the right side */
|
|
iconRight: {
|
|
type: String,
|
|
default: () => i("input.iconRight", void 0)
|
|
},
|
|
/** Make the icon right clickable */
|
|
iconRightClickable: { type: Boolean, default: !1 },
|
|
/** Variant of right icon */
|
|
iconRightVariant: { type: String, default: void 0 },
|
|
/** Add a button/icon to clear the inputed text */
|
|
clearable: {
|
|
type: Boolean,
|
|
default: () => i("input.clearable", !1)
|
|
},
|
|
/** Icon name to be added on the clear button */
|
|
clearIcon: {
|
|
type: String,
|
|
default: () => i("input.clearIcon", "close-circle")
|
|
},
|
|
/** Show status icon using field and variant prop */
|
|
statusIcon: {
|
|
type: Boolean,
|
|
default: () => i("statusIcon", !0)
|
|
},
|
|
/** Native options to use in HTML5 validation */
|
|
autocomplete: {
|
|
type: String,
|
|
default: () => i("input.autocomplete", "off")
|
|
},
|
|
/** Same as native id. Also set the for label for o-field wrapper. */
|
|
id: { type: String, default: () => ot() },
|
|
/** Enable html 5 native validation */
|
|
useHtml5Validation: {
|
|
type: Boolean,
|
|
default: () => i("useHtml5Validation", !0)
|
|
},
|
|
/** The message which is shown when a validation error occurs */
|
|
validationMessage: { type: String, default: void 0 },
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of input when expanded */
|
|
expandedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of input when type textarea */
|
|
textareaClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the left icon space inside the input */
|
|
iconLeftSpaceClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the right icon space inside the input */
|
|
iconRightSpaceClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the native input element */
|
|
inputClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of input when rounded */
|
|
roundedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of input when disabled */
|
|
disabledClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the left icon */
|
|
iconLeftClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the right icon */
|
|
iconRightClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class to display when a right icon is used */
|
|
hasIconRightClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the counter element */
|
|
counterClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the input size */
|
|
sizeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the input variant */
|
|
variantClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
}, {
|
|
modelValue: { default: "" },
|
|
modelModifiers: {}
|
|
}),
|
|
emits: /* @__PURE__ */ Be(["update:modelValue", "input", "focus", "blur", "invalid", "icon-click", "icon-right-click"], ["update:modelValue"]),
|
|
setup(e, { expose: l, emit: a }) {
|
|
var H;
|
|
const t = e, o = a, r = z(), u = z(), c = n(
|
|
() => t.type === "textarea" ? u.value : r.value
|
|
), {
|
|
checkHtml5Validity: y,
|
|
onBlur: d,
|
|
onFocus: v,
|
|
onInvalid: m,
|
|
setFocus: k,
|
|
isValid: b,
|
|
isFocused: F
|
|
} = rt(c, o, t), { parentField: B, statusVariant: S, statusVariantIcon: C } = qt(), p = Ee(e, "modelValue");
|
|
t.id && ((H = B == null ? void 0 : B.value) == null || H.setInputId(t.id));
|
|
const V = n(
|
|
() => typeof p.value == "string" ? p.value.length : typeof p.value == "number" ? p.value.toString().length : 0
|
|
);
|
|
it(() => {
|
|
fe(
|
|
() => p.value,
|
|
(Q) => {
|
|
B != null && B.value && B.value.setFilled(!!Q), t.autosize && I(), b.value || xe(() => y());
|
|
},
|
|
{ immediate: !0 }
|
|
);
|
|
});
|
|
const T = z("auto");
|
|
function I() {
|
|
T.value = "auto", xe(() => {
|
|
if (!u.value)
|
|
return;
|
|
const Q = u.value.scrollHeight;
|
|
T.value = Q + "px";
|
|
});
|
|
}
|
|
const E = n(
|
|
() => t.autosize ? {
|
|
resize: "none",
|
|
height: T.value,
|
|
overflow: "hidden"
|
|
} : {}
|
|
);
|
|
function K(Q) {
|
|
o("input", Q.target.value, Q);
|
|
}
|
|
const te = n(() => !!(t.passwordReveal || t.statusIcon && C.value || t.clearable && p.value && t.clearIcon || t.iconRight)), O = n(() => t.passwordReveal ? g.value : t.clearable && p.value && t.clearIcon ? t.clearIcon : t.iconRight ? t.iconRight : C.value), D = n(
|
|
() => t.passwordReveal || t.iconRight ? t.iconRightVariant || t.variant || null : S.value
|
|
);
|
|
function M(Q) {
|
|
o("icon-click", Q), xe(() => k());
|
|
}
|
|
function Y(Q) {
|
|
t.passwordReveal ? w() : t.clearable && (p.value = ""), t.iconRightClickable && (o("icon-right-click", Q), xe(() => k()));
|
|
}
|
|
const J = z(!1), j = n(() => t.passwordReveal ? J.value ? "text" : "password" : t.type), g = n(
|
|
() => J.value ? "eye-off" : "eye"
|
|
);
|
|
function w() {
|
|
J.value = !J.value, xe(() => k());
|
|
}
|
|
const x = h(
|
|
["rootClass", "o-input__wrapper"],
|
|
[
|
|
"expandedClass",
|
|
"o-input__wrapper--expanded",
|
|
null,
|
|
n(() => t.expanded)
|
|
],
|
|
[
|
|
"hasIconRightClass",
|
|
"o-input__wrapper--has-icon-right",
|
|
null,
|
|
te
|
|
]
|
|
), R = h(
|
|
["inputClass", "o-input"],
|
|
["roundedClass", "o-input--rounded", null, n(() => t.rounded)],
|
|
[
|
|
"sizeClass",
|
|
"o-input--",
|
|
n(() => t.size),
|
|
n(() => !!t.size)
|
|
],
|
|
[
|
|
"variantClass",
|
|
"o-input--",
|
|
n(() => S.value || t.variant),
|
|
n(() => !!S.value || !!t.variant)
|
|
],
|
|
[
|
|
"disabledClass",
|
|
"o-input--disabled",
|
|
null,
|
|
n(() => t.disabled)
|
|
],
|
|
[
|
|
"textareaClass",
|
|
"o-input__textarea",
|
|
null,
|
|
n(() => t.type === "textarea")
|
|
],
|
|
[
|
|
"iconLeftSpaceClass",
|
|
"o-input--iconspace-left",
|
|
null,
|
|
n(() => !!t.icon)
|
|
],
|
|
["iconRightSpaceClass", "o-input--iconspace-right", null, te]
|
|
), _ = h(["iconLeftClass", "o-input__icon-left"]), N = h([
|
|
"iconRightClass",
|
|
"o-input__icon-right"
|
|
]), L = h(["counterClass", "o-input__counter"]);
|
|
return l({ focus: k }), (Q, ne) => (f(), $("div", {
|
|
"data-oruga": "input",
|
|
class: P(s(x))
|
|
}, [
|
|
e.type !== "textarea" ? Oe((f(), $("input", ye({ key: 0 }, Q.$attrs, {
|
|
id: e.id,
|
|
ref_key: "inputRef",
|
|
ref: r,
|
|
"onUpdate:modelValue": ne[0] || (ne[0] = (Ae) => p.value = Ae),
|
|
"data-oruga-input": j.value,
|
|
type: j.value,
|
|
class: s(R),
|
|
maxlength: e.maxlength,
|
|
autocomplete: e.autocomplete,
|
|
placeholder: e.placeholder,
|
|
disabled: e.disabled,
|
|
onBlur: ne[1] || (ne[1] = //@ts-ignore
|
|
(...Ae) => s(d) && s(d)(...Ae)),
|
|
onFocus: ne[2] || (ne[2] = //@ts-ignore
|
|
(...Ae) => s(v) && s(v)(...Ae)),
|
|
onInvalid: ne[3] || (ne[3] = //@ts-ignore
|
|
(...Ae) => s(m) && s(m)(...Ae)),
|
|
onInput: K
|
|
}), null, 16, on)), [
|
|
[Pl, p.value]
|
|
]) : Oe((f(), $("textarea", ye({ key: 1 }, Q.$attrs, {
|
|
id: e.id,
|
|
ref_key: "textareaRef",
|
|
ref: u,
|
|
"onUpdate:modelValue": ne[4] || (ne[4] = (Ae) => p.value = Ae),
|
|
"data-oruga-input": "textarea",
|
|
class: s(R),
|
|
maxlength: e.maxlength,
|
|
style: E.value,
|
|
placeholder: e.placeholder,
|
|
disabled: e.disabled,
|
|
onBlur: ne[5] || (ne[5] = //@ts-ignore
|
|
(...Ae) => s(d) && s(d)(...Ae)),
|
|
onFocus: ne[6] || (ne[6] = //@ts-ignore
|
|
(...Ae) => s(v) && s(v)(...Ae)),
|
|
onInvalid: ne[7] || (ne[7] = //@ts-ignore
|
|
(...Ae) => s(m) && s(m)(...Ae)),
|
|
onInput: K
|
|
}), null, 16, sn)), [
|
|
[Ml, p.value]
|
|
]),
|
|
e.icon ? (f(), ie(Te, {
|
|
key: 2,
|
|
class: P(s(_)),
|
|
clickable: e.iconClickable,
|
|
icon: e.icon,
|
|
pack: e.iconPack,
|
|
size: e.size,
|
|
onClick: M
|
|
}, null, 8, ["class", "clickable", "icon", "pack", "size"])) : G("", !0),
|
|
te.value ? (f(), ie(Te, {
|
|
key: 3,
|
|
class: P(s(N)),
|
|
clickable: e.passwordReveal || e.clearable || e.iconRightClickable,
|
|
icon: O.value,
|
|
pack: e.iconPack,
|
|
size: e.size,
|
|
variant: D.value,
|
|
both: "",
|
|
onClick: Y
|
|
}, null, 8, ["class", "clickable", "icon", "pack", "size", "variant"])) : G("", !0),
|
|
e.maxlength && e.counter && s(F) && e.type !== "number" ? (f(), $("small", {
|
|
key: 4,
|
|
class: P(s(L))
|
|
}, ce(V.value) + " / " + ce(e.maxlength), 3)) : G("", !0)
|
|
], 2));
|
|
}
|
|
}), Ga = /* @__PURE__ */ be({
|
|
inheritAttrs: !1,
|
|
__name: "PositionWrapper",
|
|
props: {
|
|
teleport: {
|
|
type: [Boolean, String, Object],
|
|
required: !0
|
|
},
|
|
trigger: {
|
|
type: Object,
|
|
default: void 0
|
|
},
|
|
/**
|
|
* Position of the component relative to the trigger
|
|
* @values auto, top, bottom, left, right, top-right, top-left, bottom-left, bottom-right
|
|
*/
|
|
position: {
|
|
type: String,
|
|
validator: (e) => [
|
|
"auto",
|
|
"top",
|
|
"bottom",
|
|
"left",
|
|
"right",
|
|
"top-right",
|
|
"top-left",
|
|
"bottom-left",
|
|
"bottom-right"
|
|
].indexOf(e) > -1,
|
|
default: void 0
|
|
},
|
|
/** Used for calculation position auto */
|
|
defaultPosition: {
|
|
type: String,
|
|
validator: (e) => ["top", "bottom", "left", "right"].indexOf(e) > -1,
|
|
default: "top"
|
|
},
|
|
/** disable the position calculation */
|
|
disabled: { type: Boolean, default: !1 },
|
|
/** update positioning on teleport */
|
|
disablePositioning: { type: Boolean, default: !0 }
|
|
},
|
|
emits: ["update:position"],
|
|
setup(e, { emit: l }) {
|
|
const a = {
|
|
top: "bottom",
|
|
bottom: "top",
|
|
right: "left",
|
|
left: "right"
|
|
}, t = e, o = l, r = n(
|
|
() => typeof t.teleport == "boolean" ? "body" : t.teleport
|
|
), u = n(
|
|
() => typeof t.teleport == "boolean" || !t.teleport ? !t.teleport : !1
|
|
), c = z();
|
|
function y(p) {
|
|
return c.value = p, xe(() => {
|
|
F(), k();
|
|
}), p;
|
|
}
|
|
const d = t.position, v = z(void 0), m = z(null);
|
|
Me && window.ResizeObserver && (m.value = new window.ResizeObserver(F)), fe(
|
|
() => t.disabled,
|
|
() => {
|
|
t.disabled ? b() : k();
|
|
},
|
|
{ immediate: !0 }
|
|
), fe(
|
|
[
|
|
() => !!t.trigger,
|
|
() => t.disablePositioning,
|
|
() => t.disabled
|
|
],
|
|
() => {
|
|
xe(() => F());
|
|
},
|
|
{ immediate: !0 }
|
|
), Tt(() => b());
|
|
function k() {
|
|
Me && !v.value && c.value && (v.value = nn(qe(c)), v.value && v.value !== document.documentElement ? (v.value.addEventListener(
|
|
"scroll",
|
|
F,
|
|
{ passive: !0 }
|
|
), window.ResizeObserver && m.value.observe(v.value)) : (document.addEventListener("scroll", F, {
|
|
passive: !0
|
|
}), window.addEventListener("resize", F)));
|
|
}
|
|
function b() {
|
|
var p;
|
|
Me && (window.ResizeObserver && ((p = m.value) == null || p.disconnect()), window.removeEventListener("resize", F), document.removeEventListener("scroll", F), v.value = void 0);
|
|
}
|
|
function F() {
|
|
if (t.disabled)
|
|
return;
|
|
let p = t.position;
|
|
if (d === "auto" && (p = B(), p != t.position && o("update:position", p)), !t.teleport)
|
|
return;
|
|
const V = qe(c), T = qe(t.trigger);
|
|
if (V && T) {
|
|
const I = T.getBoundingClientRect();
|
|
let E = I.top + window.scrollY, K = I.left + window.scrollX;
|
|
p.includes("bottom") ? E += T.clientHeight : p.includes("top") && (E -= V.clientHeight), p === "left" ? K -= V.clientWidth : p === "right" ? K += T.clientWidth : p.includes("-right") && (K += T.clientWidth - V.clientWidth), (p === "top" || p === "bottom") && (K += T.clientWidth / 2), (p === "left" || p === "right") && (E += T.clientHeight / 2), t.disablePositioning ? (V.style.position = "relative", V.style.top = `${E}px`, V.style.left = `${K}px`) : (V.style.position = "", V.style.top = "", V.style.left = "");
|
|
}
|
|
}
|
|
function B() {
|
|
let p = t.defaultPosition;
|
|
if (!t.trigger || !c.value || !v.value)
|
|
return p;
|
|
const V = new DOMRect(
|
|
v.value.offsetLeft,
|
|
v.value.offsetTop,
|
|
v.value.clientWidth,
|
|
v.value.clientHeight
|
|
), T = qe(c).getBoundingClientRect(), I = qe(t.trigger).getBoundingClientRect(), E = C(I), K = C(T), te = (j) => {
|
|
const g = E[j], w = K[a[j]];
|
|
return new DOMRect(
|
|
T.x + (g.x - w.x),
|
|
T.y + (g.y - w.y),
|
|
T.width,
|
|
T.height
|
|
);
|
|
}, O = a[t.defaultPosition], D = t.defaultPosition === "top" || t.defaultPosition === "bottom" ? "left" : "top", M = a[D], Y = [
|
|
t.defaultPosition,
|
|
O,
|
|
D,
|
|
M
|
|
];
|
|
let J = 0;
|
|
for (const j of Y) {
|
|
const g = S(
|
|
V,
|
|
te(j)
|
|
);
|
|
g > J && (J = g, p = j);
|
|
}
|
|
return p;
|
|
}
|
|
function S(p, V) {
|
|
const T = Math.max(p.left, V.left), I = Math.min(p.right, V.right), E = Math.max(p.top, V.top), K = Math.min(p.bottom, V.bottom);
|
|
return Math.max(I - T, 0) * Math.max(K - E, 0);
|
|
}
|
|
const C = (p) => ({
|
|
top: { x: (p.left + p.right) * 0.5, y: p.top },
|
|
bottom: { x: (p.left + p.right) * 0.5, y: p.bottom },
|
|
left: { x: p.left, y: (p.top + p.bottom) * 0.5 },
|
|
right: { x: p.right, y: (p.top + p.bottom) * 0.5 }
|
|
});
|
|
return (p, V) => (f(), ie(ua, {
|
|
to: r.value,
|
|
disabled: u.value
|
|
}, [
|
|
u.value ? Z(p.$slots, "default", {
|
|
key: 0,
|
|
setContent: y
|
|
}) : (f(), $("div", ye({ key: 1 }, p.$attrs, { style: { position: "absolute", left: "0px", top: "0px" } }), [
|
|
Z(p.$slots, "default", { setContent: y })
|
|
], 16))
|
|
], 8, ["to", "disabled"]));
|
|
}
|
|
}), Lt = (e, l = !1) => e ? l ? e.querySelectorAll('*[tabindex="-1"]') : e.querySelectorAll(`a[href]:not([tabindex="-1"]),
|
|
area[href],
|
|
input:not([disabled]),
|
|
select:not([disabled]),
|
|
textarea:not([disabled]),
|
|
button:not([disabled]),
|
|
iframe,
|
|
object,
|
|
embed,
|
|
*[tabindex]:not([tabindex="-1"]),
|
|
*[contenteditable]`) : null;
|
|
let sa;
|
|
const rn = (e, { value: l = !0 }) => {
|
|
if (l) {
|
|
let a = Lt(e), t = Lt(e, !0);
|
|
a && a.length > 0 && (sa = (o) => {
|
|
a = Lt(e), t = Lt(e, !0);
|
|
const r = a[0], u = a[a.length - 1];
|
|
o.target === r && o.shiftKey && o.key === "Tab" ? (o.preventDefault(), u.focus()) : (o.target === u || Array.from(t).indexOf(o.target) >= 0) && !o.shiftKey && o.key === "Tab" && (o.preventDefault(), r.focus());
|
|
}, e.addEventListener("keydown", sa));
|
|
}
|
|
}, un = (e) => {
|
|
e.removeEventListener("keydown", sa);
|
|
}, dn = {
|
|
beforeMount: rn,
|
|
beforeUnmount: un
|
|
}, Ja = dn, cn = ["aria-hidden"], va = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "ODropdown",
|
|
configField: "dropdown",
|
|
__name: "Dropdown",
|
|
props: /* @__PURE__ */ Be({
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** @model */
|
|
modelValue: {
|
|
type: [String, Number, Boolean, Object, Array],
|
|
default: void 0
|
|
},
|
|
/** The active state of the dropdown, use v-model:active to make it two-way binding. */
|
|
active: { type: Boolean, default: !1 },
|
|
/** Trigger label, unnecessary when trgger slot is used */
|
|
label: { type: String, default: void 0 },
|
|
/** Dropdown is disabled */
|
|
disabled: { type: Boolean, default: !1 },
|
|
/** Dropdown content (items) are shown inline, trigger is removed */
|
|
inline: { type: Boolean, default: !1 },
|
|
/** Dropdown content will be scrollable */
|
|
scrollable: { type: Boolean, default: !1 },
|
|
/** Max height of dropdown content */
|
|
maxHeight: {
|
|
type: [String, Number],
|
|
default: () => i("dropdown.maxHeight", 200)
|
|
},
|
|
/**
|
|
* Position of the dropdown relative to the trigger
|
|
* @values auto, top, bottom, left, right, top-right, top-left, bottom-left, bottom-right
|
|
*/
|
|
position: {
|
|
type: String,
|
|
default: () => i("dropdown.position", "bottom-left"),
|
|
validator: (e) => [
|
|
"auto",
|
|
"top",
|
|
"bottom",
|
|
"left",
|
|
"right",
|
|
"top-right",
|
|
"top-left",
|
|
"bottom-left",
|
|
"bottom-right"
|
|
].indexOf(e) > -1
|
|
},
|
|
/** Dropdown content (items) are shown into a modal on mobile */
|
|
mobileModal: {
|
|
type: Boolean,
|
|
default: () => i("dropdown.mobileModal", !0)
|
|
},
|
|
/** Custom animation (transition name) */
|
|
animation: {
|
|
type: String,
|
|
default: () => i("dropdown.animation", "fade")
|
|
},
|
|
/** Allows multiple selections */
|
|
multiple: { type: Boolean, default: !1 },
|
|
/** Trap focus inside the dropdown. */
|
|
trapFocus: {
|
|
type: Boolean,
|
|
default: () => i("dropdown.trapFocus", !0)
|
|
},
|
|
/** Makes the component check if menu reached scroll start or end and emit scroll events. */
|
|
checkScroll: {
|
|
type: Boolean,
|
|
default: () => i("dropdown.checkScroll", !1)
|
|
},
|
|
/** Dropdown will be expanded (full-width) */
|
|
expanded: { type: Boolean, default: !1 },
|
|
/** HTML element ID of the dropdown menu element */
|
|
menuId: { type: String, default: null },
|
|
/** Tabindex of the dropdown menu element */
|
|
menuTabindex: { type: Number, default: null },
|
|
/** Dropdown menu tag name */
|
|
menuTag: {
|
|
type: [String, Object, Function],
|
|
default: () => i("dropdown.menuTag", "div")
|
|
},
|
|
/** Dropdown trigger tag name */
|
|
triggerTag: {
|
|
type: [String, Object, Function],
|
|
default: () => i("dropdown.triggerTag", "div")
|
|
},
|
|
/**
|
|
* Dropdown will be triggered by any events
|
|
* @values click, hover, contextmenu, focus
|
|
*/
|
|
triggers: {
|
|
type: Array,
|
|
default: () => i("dropdown.triggers", ["click"]),
|
|
validator: (e) => e.filter(
|
|
(l) => ["click", "hover", "contextmenu", "focus"].indexOf(l) > -1
|
|
).length === e.length
|
|
},
|
|
/** Dropdown delay before it appears (number in ms) */
|
|
delay: { type: Number, default: void 0 },
|
|
/**
|
|
* Dropdown close options (pressing escape, clicking the content or outside)
|
|
* @values true, false, escape, outside, content
|
|
*/
|
|
closeable: {
|
|
type: [Array, Boolean],
|
|
default: () => i("dropdown.closeable", ["escape", "outside", "content"])
|
|
},
|
|
/** Set the tabindex attribute on the dropdown trigger div (-1 to prevent selection via tab key) */
|
|
tabindex: { type: Number, default: 0 },
|
|
/**
|
|
* Role attribute to be passed to the list container for better accessibility.
|
|
* Use menu only in situations where your dropdown is related to a navigation menu.
|
|
* @values list, listbox, menu, dialog
|
|
*/
|
|
ariaRole: {
|
|
type: String,
|
|
default: i("dropdown.ariaRole", "list"),
|
|
validator: (e) => ["list", "listbox", "menu", "dialog"].indexOf(e) > -1
|
|
},
|
|
/** Mobile breakpoint as max-width value */
|
|
mobileBreakpoint: {
|
|
type: String,
|
|
default: () => i("dropdown.mobileBreakpoint")
|
|
},
|
|
/**
|
|
* Append the component to another part of the DOM.
|
|
* Set `true` to append the component to the body.
|
|
* In addition, any CSS selector string or an actual DOM node can be used.
|
|
*/
|
|
teleport: {
|
|
type: [Boolean, String, Object],
|
|
default: () => i("dropdown.teleport", !1)
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class when the dropdown is teleported */
|
|
teleportClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the trigger element */
|
|
triggerClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of dropdown menu when inline */
|
|
inlineClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the overlay when on mobile */
|
|
menuMobileOverlayClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the dropdown menu */
|
|
menuClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of dropdown menu position */
|
|
menuPositionClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of dropdown menu when active */
|
|
menuActiveClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of dropdown when on mobile */
|
|
mobileClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of dropdown when disabled */
|
|
disabledClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of dropdown when expanded */
|
|
expandedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class for the root element indicating position of dropdown */
|
|
positionClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class for the root element indicating whether the dropdown is open */
|
|
activeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class for the root element when the dropdown is hoverable */
|
|
hoverableClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
}, {
|
|
modelValue: {},
|
|
modelModifiers: {},
|
|
active: { type: Boolean },
|
|
activeModifiers: {}
|
|
}),
|
|
emits: /* @__PURE__ */ Be(["update:modelValue", "update:active", "change", "close", "scroll-start", "scroll-end"], ["update:modelValue", "update:active"]),
|
|
setup(e, { expose: l, emit: a }) {
|
|
const t = e, o = a, r = Ee(e, "modelValue"), u = Ee(e, "active"), c = z(t.position);
|
|
fe(
|
|
() => t.position,
|
|
(L) => c.value = L
|
|
);
|
|
const { isMobile: y } = ct(t.mobileBreakpoint), d = n(
|
|
() => y.value && t.mobileModal && !t.inline
|
|
), v = n(() => t.mobileModal && ft.any()), m = n(() => ({
|
|
maxHeight: t.scrollable ? St(t.maxHeight) : null,
|
|
overflow: t.scrollable ? "auto" : null
|
|
})), k = n(() => t.triggers.indexOf("hover") >= 0), b = z(), F = z(), B = [];
|
|
let S;
|
|
fe(
|
|
u,
|
|
(L) => {
|
|
L && Me ? setTimeout(() => {
|
|
C.value.indexOf("outside") >= 0 && B.push(
|
|
fa(b, p, [
|
|
F
|
|
])
|
|
), C.value.indexOf("escape") >= 0 && B.push(
|
|
_e("keyup", V, document, {
|
|
immediate: !0
|
|
})
|
|
);
|
|
}) : L || (B.forEach((H) => H()), B.length = 0);
|
|
},
|
|
{ immediate: !0 }
|
|
), za(() => {
|
|
B.forEach((L) => L()), B.length = 0;
|
|
});
|
|
const C = n(
|
|
() => typeof t.closeable == "boolean" ? t.closeable ? ["escape", "outside", "content"] : [] : t.closeable
|
|
);
|
|
function p() {
|
|
!u.value || t.inline || C.value.indexOf("outside") < 0 || (o("close", "outside"), u.value = !1);
|
|
}
|
|
function V(L) {
|
|
if (u.value && (L.key === "Escape" || L.key === "Esc")) {
|
|
if (C.value.indexOf("escape") < 0)
|
|
return;
|
|
o("close", "escape"), u.value = !1;
|
|
}
|
|
}
|
|
function T() {
|
|
t.triggers.indexOf("click") < 0 || D();
|
|
}
|
|
function I(L) {
|
|
t.triggers.indexOf("contextmenu") < 0 || (L.preventDefault(), M());
|
|
}
|
|
function E() {
|
|
t.triggers.indexOf("focus") < 0 || M();
|
|
}
|
|
const K = z(!1);
|
|
function te() {
|
|
!v.value && t.triggers.indexOf("hover") >= 0 && (K.value = !0, M());
|
|
}
|
|
function O() {
|
|
!v.value && K.value && (K.value = !1, Y());
|
|
}
|
|
function D() {
|
|
t.disabled || (u.value ? u.value = !u.value : xe(() => u.value = !u.value));
|
|
}
|
|
function M() {
|
|
t.disabled || (t.delay ? S = setTimeout(() => {
|
|
u.value = !0, S = null;
|
|
}, t.delay) : u.value = !0);
|
|
}
|
|
function Y() {
|
|
C.value.indexOf("content") < 0 || (o("close", "content"), u.value = !t.closeable, S && t.closeable && clearTimeout(S));
|
|
}
|
|
Me && t.checkScroll && _e("scroll", J, b);
|
|
function J() {
|
|
const L = qe(b);
|
|
L.clientHeight !== L.scrollHeight && (L.scrollTop + L.clientHeight >= L.scrollHeight ? o("scroll-end") : L.scrollTop <= 0 && o("scroll-start"));
|
|
}
|
|
function j(L) {
|
|
if (t.multiple ? (r.value && Array.isArray(r.value) ? r.value.indexOf(L) === -1 ? r.value = [...r.value, L] : r.value = r.value.filter((H) => H !== L) : r.value = [L], xe(() => o("change", r.value))) : r.value !== L && (r.value = L, xe(() => o("change", r.value))), !t.multiple) {
|
|
if (C.value.indexOf("content") < 0)
|
|
return;
|
|
o("close", "content"), u.value = !1, K.value = !1;
|
|
}
|
|
}
|
|
const g = n(() => ({
|
|
props: t,
|
|
selected: r.value,
|
|
selectItem: j
|
|
}));
|
|
gt(b, { data: g });
|
|
const w = h(
|
|
["rootClass", "o-drop"],
|
|
["disabledClass", "o-drop--disabled", null, n(() => t.disabled)],
|
|
["expandedClass", "o-drop--expanded", null, n(() => t.expanded)],
|
|
["inlineClass", "o-drop--inline", null, n(() => t.inline)],
|
|
[
|
|
"mobileClass",
|
|
"o-drop--mobile",
|
|
null,
|
|
n(() => d.value && !k.value)
|
|
],
|
|
[
|
|
"positionClass",
|
|
"o-drop--position-",
|
|
c,
|
|
n(() => !!c.value)
|
|
],
|
|
[
|
|
"activeClass",
|
|
"o-drop--active",
|
|
null,
|
|
n(() => u.value || t.inline)
|
|
],
|
|
["hoverableClass", "o-drop--hoverable", null, k]
|
|
), x = h(["triggerClass", "o-drop__trigger"]), R = h([
|
|
"teleportClass",
|
|
"o-drop--teleport",
|
|
null,
|
|
n(() => !!t.teleport)
|
|
]), _ = h([
|
|
"menuMobileOverlayClass",
|
|
"o-drop__overlay"
|
|
]), N = h(
|
|
["menuClass", "o-drop__menu"],
|
|
[
|
|
"menuPositionClass",
|
|
"o-drop__menu--",
|
|
c,
|
|
n(() => !!c.value)
|
|
],
|
|
[
|
|
"menuActiveClass",
|
|
"o-drop__menu--active",
|
|
null,
|
|
n(() => u.value || t.inline)
|
|
]
|
|
);
|
|
return l({ $trigger: F, $content: b }), (L, H) => (f(), $("div", {
|
|
"data-oruga": "dropdown",
|
|
class: P(s(w)),
|
|
onMouseleave: O,
|
|
onFocusout: O
|
|
}, [
|
|
e.inline ? G("", !0) : (f(), ie(Ke(e.triggerTag), {
|
|
key: 0,
|
|
ref_key: "triggerRef",
|
|
ref: F,
|
|
tabindex: e.disabled ? null : e.tabindex,
|
|
class: P(s(x)),
|
|
"aria-haspopup": e.ariaRole === "list" ? !0 : e.ariaRole,
|
|
onClick: T,
|
|
onContextmenu: I,
|
|
onMouseenter: te,
|
|
onFocusCapture: E
|
|
}, {
|
|
default: ue(() => [
|
|
Z(L.$slots, "trigger", { active: u.value }, () => [
|
|
Ve(ce(e.label), 1)
|
|
])
|
|
]),
|
|
_: 3
|
|
}, 40, ["tabindex", "class", "aria-haspopup"])),
|
|
me(Ga, {
|
|
position: c.value,
|
|
"onUpdate:position": H[0] || (H[0] = (Q) => c.value = Q),
|
|
teleport: e.teleport,
|
|
class: P([...s(w), ...s(R)]),
|
|
trigger: F.value,
|
|
disabled: !u.value,
|
|
"default-position": "bottom",
|
|
"disable-positioning": !d.value
|
|
}, {
|
|
default: ue(({ setContent: Q }) => [
|
|
me(tt, { name: e.animation }, {
|
|
default: ue(() => [
|
|
d.value ? Oe((f(), $("div", {
|
|
key: 0,
|
|
tabindex: -1,
|
|
class: P(s(_)),
|
|
"aria-hidden": e.disabled || !u.value
|
|
}, null, 10, cn)), [
|
|
[Ne, u.value]
|
|
]) : G("", !0)
|
|
]),
|
|
_: 1
|
|
}, 8, ["name"]),
|
|
me(tt, { name: e.animation }, {
|
|
default: ue(() => [
|
|
Oe((f(), ie(Ke(e.menuTag), {
|
|
id: e.menuId,
|
|
ref: (ne) => b.value = Q(ne),
|
|
tabindex: e.menuTabindex,
|
|
class: P(s(N)),
|
|
style: et(m.value),
|
|
role: e.ariaRole,
|
|
"aria-hidden": e.disabled || !u.value,
|
|
"aria-modal": !e.inline && e.trapFocus
|
|
}, {
|
|
default: ue(() => [
|
|
Z(L.$slots, "default", {
|
|
active: u.value,
|
|
toggle: D
|
|
})
|
|
]),
|
|
_: 2
|
|
}, 1032, ["id", "tabindex", "class", "style", "role", "aria-hidden", "aria-modal"])), [
|
|
[Ne, !e.disabled && (u.value || K.value) || e.inline],
|
|
[s(Ja), e.trapFocus]
|
|
])
|
|
]),
|
|
_: 2
|
|
}, 1032, ["name"])
|
|
]),
|
|
_: 3
|
|
}, 8, ["position", "teleport", "class", "trigger", "disabled", "disable-positioning"])
|
|
], 34));
|
|
}
|
|
}), Ct = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "ODropdownItem",
|
|
configField: "dropdown",
|
|
__name: "DropdownItem",
|
|
props: {
|
|
/** The value that will be returned on events and v-model - default is a uuid */
|
|
value: {
|
|
type: [String, Number, Boolean, Object, Array],
|
|
default: void 0
|
|
// () => uuid(),
|
|
},
|
|
/** Item label, unnecessary when default slot is used */
|
|
label: { type: String, default: void 0 },
|
|
/** Item is disabled */
|
|
disabled: { type: Boolean, default: !1 },
|
|
/** Item is clickable and emit an event */
|
|
clickable: { type: Boolean, default: !0 },
|
|
/** Dropdown item tag name */
|
|
tag: {
|
|
type: [String, Object, Function],
|
|
default: () => i("dropdown.itemTag", "div")
|
|
},
|
|
/** Set the tabindex attribute on the dropdown item div (-1 to prevent selection via tab key) */
|
|
tabindex: { type: [Number, String], default: 0 },
|
|
/**
|
|
* Role attribute to be passed to the list item for better accessibility.
|
|
* Use menuitem only in situations where your dropdown is related to a navigation menu.
|
|
* @values listitem, menuitem, button
|
|
*/
|
|
ariaRole: {
|
|
type: String,
|
|
default: i("dropdown.itemAriaRole", "listitem")
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the dropdown item */
|
|
itemClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the dropdown item when active */
|
|
itemActiveClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the dropdown item when clickable */
|
|
itemClickableClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the dropdown item when disabled */
|
|
itemDisabledClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
emits: ["click"],
|
|
setup(e, { emit: l }) {
|
|
const a = e, t = l, o = n(() => a.value || ot()), { parent: r } = yt(), u = n(
|
|
() => !r.value.props.disabled && !a.disabled && a.clickable
|
|
), c = n(() => r.value.selected === null ? !1 : r.value.props.multiple && Array.isArray(r.value.selected) ? r.value.selected.some(
|
|
(v) => Vt(o.value, v)
|
|
) : Vt(o.value, r.value.selected));
|
|
function y(v) {
|
|
u.value && (r.value.selectItem(o.value), t("click", o.value, v));
|
|
}
|
|
const d = h(
|
|
["itemClass", "o-drop__item"],
|
|
[
|
|
"itemDisabledClass",
|
|
"o-drop__item--disabled",
|
|
null,
|
|
n(() => r.value.props.disabled || a.disabled)
|
|
],
|
|
["itemActiveClass", "o-drop__item--active", null, c],
|
|
["itemClickableClass", "o-drop__item--clickable", null, u]
|
|
);
|
|
return (v, m) => (f(), ie(Ke(e.tag), {
|
|
class: P(s(d)),
|
|
role: e.ariaRole,
|
|
tabindex: e.tabindex,
|
|
"data-oruga": "dropdown-item",
|
|
onClick: y
|
|
}, {
|
|
default: ue(() => [
|
|
Z(v.$slots, "default", {}, () => [
|
|
Ve(ce(e.label), 1)
|
|
])
|
|
]),
|
|
_: 3
|
|
}, 8, ["class", "role", "tabindex"]));
|
|
}
|
|
}), fn = { key: 1 }, vn = { key: 1 };
|
|
var Qa = /* @__PURE__ */ ((e) => (e[e.Header = 0] = "Header", e[e.Footer = 1] = "Footer", e))(Qa || {});
|
|
const Za = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OAutocomplete",
|
|
configField: "autocomplete",
|
|
inheritAttrs: !1,
|
|
__name: "Autocomplete",
|
|
props: /* @__PURE__ */ Be({
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** @model */
|
|
modelValue: { type: [String, Number], default: void 0 },
|
|
/** Input type */
|
|
type: { type: String, default: "text" },
|
|
/** Menu tag name */
|
|
menuTag: {
|
|
type: [String, Object, Function],
|
|
default: () => i("autocomplete.menuTag", "div")
|
|
},
|
|
/** Menu item tag name */
|
|
itemTag: {
|
|
type: [String, Object, Function],
|
|
default: () => i("autocomplete.itemTag", "div")
|
|
},
|
|
/** Options / suggestions */
|
|
data: { type: Array, default: () => [] },
|
|
/**
|
|
* Size of the control
|
|
* @values small, medium, large
|
|
*/
|
|
size: {
|
|
type: String,
|
|
default: () => i("autocomplete.size")
|
|
},
|
|
/**
|
|
* Position of the dropdown
|
|
* @values auto, top, bottom
|
|
*/
|
|
position: {
|
|
type: String,
|
|
default: () => i("autocomplete.position", "auto"),
|
|
validator: (e) => ["auto", "top", "bottom"].indexOf(e) >= 0
|
|
},
|
|
/** Property of the object (if data is array of objects) to use as display text, and to keep track of selected option */
|
|
field: { type: String, default: void 0 },
|
|
/** Property of the object (if `data` is array of objects) to use as display text of group */
|
|
groupField: { type: String, default: void 0 },
|
|
/** Property of the object (if `data` is array of objects) to use as key to get items array of each group */
|
|
groupOptions: { type: String, default: void 0 },
|
|
/** Function to format an option to a string for display in the input (as alternative to field prop) */
|
|
formatter: {
|
|
type: Function,
|
|
default: void 0
|
|
},
|
|
/** Input placeholder */
|
|
placeholder: { type: String, default: void 0 },
|
|
/** Makes input full width when inside a grouped or addon field */
|
|
expanded: { type: Boolean, default: !1 },
|
|
/** Makes the element rounded */
|
|
rounded: { type: Boolean, default: !1 },
|
|
/** Same as native input disabled */
|
|
disabled: { type: Boolean, default: !1 },
|
|
/** Same as native maxlength, plus character counter */
|
|
maxlength: { type: [String, Number], default: void 0 },
|
|
/** Makes the component check if list reached scroll start or end and emit scroll events. */
|
|
checkScroll: {
|
|
type: Boolean,
|
|
default: () => i("autocomplete.checkScroll", !1)
|
|
},
|
|
/** Number of milliseconds to delay before to emit input event */
|
|
debounce: {
|
|
type: Number,
|
|
default: () => i("autocomplete.debounce", 400)
|
|
},
|
|
/** The first option will always be pre-selected (easier to just hit enter or tab) */
|
|
keepFirst: {
|
|
type: Boolean,
|
|
default: () => i("autocomplete.keepFirst", !1)
|
|
},
|
|
/** Clear input text on select */
|
|
clearOnSelect: {
|
|
type: Boolean,
|
|
default: () => i("autocomplete.clearOnSelect", !1)
|
|
},
|
|
/** Open dropdown list on focus */
|
|
openOnFocus: {
|
|
type: Boolean,
|
|
default: () => i("autocomplete.openOnFocus", !1)
|
|
},
|
|
/** Keep open dropdown list after select */
|
|
keepOpen: {
|
|
type: Boolean,
|
|
default: () => i("autocomplete.keepOpen", !1)
|
|
},
|
|
/** Max height of dropdown content */
|
|
maxHeight: {
|
|
type: [String, Number],
|
|
default: () => i("autocomplete.maxHeight")
|
|
},
|
|
/** Array of keys (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) which will add a tag when typing (default tab and enter) */
|
|
confirmKeys: {
|
|
type: Array,
|
|
default: () => i("autocomplete.confirmKeys", ["Tab", "Enter"])
|
|
},
|
|
/** Dropdown content (items) are shown into a modal on mobile */
|
|
mobileModal: {
|
|
type: Boolean,
|
|
default: () => i("autocomplete.mobileModal", !1)
|
|
},
|
|
/** Transition name to apply on dropdown list */
|
|
animation: {
|
|
type: String,
|
|
default: () => i("autocomplete.animation", "fade")
|
|
},
|
|
/** Trigger the select event for the first pre-selected option when clicking outside and `keep-first` is enabled */
|
|
selectOnClickOutside: { type: Boolean, default: !1 },
|
|
/** Allows the header in the autocomplete to be selectable */
|
|
selectableHeader: { type: Boolean, default: !1 },
|
|
/** Allows the footer in the autocomplete to be selectable */
|
|
selectableFooter: { type: Boolean, default: !1 },
|
|
/**
|
|
* Icon pack to use
|
|
* @values mdi, fa, fas and any other custom icon pack
|
|
*/
|
|
iconPack: {
|
|
type: String,
|
|
default: () => i("autocomplete.iconPack", void 0)
|
|
},
|
|
/** Icon to be shown */
|
|
icon: {
|
|
type: String,
|
|
default: () => i("autocomplete.icon", void 0)
|
|
},
|
|
/** Makes the icon clickable */
|
|
iconClickable: { type: Boolean, default: !1 },
|
|
/** Icon to be added on the right side */
|
|
iconRight: {
|
|
type: String,
|
|
default: () => i("autocomplete.iconRight", void 0)
|
|
},
|
|
/** Make the icon right clickable */
|
|
iconRightClickable: { type: Boolean, default: !1 },
|
|
/** Variant of right icon */
|
|
iconRightVariant: { type: String, default: void 0 },
|
|
/** Add a button/icon to clear the inputed text */
|
|
clearable: {
|
|
type: Boolean,
|
|
default: () => i("autocomplete.clearable", !1)
|
|
},
|
|
/** Icon name to be added on the clear button */
|
|
clearIcon: {
|
|
type: String,
|
|
default: () => i("autocomplete.clearIcon", "close-circle")
|
|
},
|
|
/** Show status icon using field and variant prop */
|
|
statusIcon: {
|
|
type: Boolean,
|
|
default: () => i("statusIcon", !0)
|
|
},
|
|
/** Native options to use in HTML5 validation */
|
|
autocomplete: {
|
|
type: String,
|
|
default: () => i("autocomplete.autocomplete", "off")
|
|
},
|
|
/** Enable html 5 native validation */
|
|
useHtml5Validation: {
|
|
type: Boolean,
|
|
default: () => i("useHtml5Validation", !0)
|
|
},
|
|
/** The message which is shown when a validation error occurs */
|
|
validationMessage: { type: String, default: void 0 },
|
|
/**
|
|
* Append the component to another part of the DOM.
|
|
* Set `true` to append the component to the body.
|
|
* In addition, any CSS selector string or an actual DOM node can be used.
|
|
*/
|
|
teleport: {
|
|
type: [Boolean, String, Object],
|
|
default: () => i("autocomplete.teleport", !1)
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the menu items */
|
|
itemClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the menu items on hover */
|
|
itemHoverClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the menu items group title */
|
|
itemGroupTitleClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the menu empty placeholder item */
|
|
itemEmptyClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the menu header item */
|
|
itemHeaderClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the menu footer item */
|
|
itemFooterClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/**
|
|
* Classes to apply on internal input component
|
|
* @ignore
|
|
*/
|
|
inputClasses: {
|
|
type: Object,
|
|
default: () => i("autocomplete.inputClasses", {})
|
|
}
|
|
}, {
|
|
modelValue: { default: void 0 },
|
|
modelModifiers: {}
|
|
}),
|
|
emits: /* @__PURE__ */ Be(["update:modelValue", "input", "select", "select-header", "select-footer", "focus", "blur", "invalid", "icon-click", "icon-right-click", "scroll-start", "scroll-end"], ["update:modelValue"]),
|
|
setup(e, { expose: l, emit: a }) {
|
|
function t(X) {
|
|
return X in Qa;
|
|
}
|
|
const o = e, r = a, u = Rt(), c = z(), y = z(), d = z(), v = z(), m = z([]);
|
|
function k(X, oe, pe) {
|
|
oe === 0 && pe === 0 && m.value.splice(0), X && m.value.push(X);
|
|
}
|
|
const { checkHtml5Validity: b, onInvalid: F, onFocus: B, onBlur: S, isFocused: C, setFocus: p } = rt(c, r, o), V = Ee(e, "modelValue"), T = z(!1), I = z(), E = z(), K = z(!1), te = z(!1), O = z(null), D = ot();
|
|
fe(
|
|
() => V.value,
|
|
(X) => {
|
|
const oe = g(I.value);
|
|
oe && oe !== X && R(null, !1), xe(() => {
|
|
Y.value && !u.empty ? T.value = !1 : C.value && (!o.openOnFocus || X) && (T.value = !!X);
|
|
});
|
|
}
|
|
), fe(
|
|
() => o.data,
|
|
() => {
|
|
if (o.keepFirst)
|
|
xe(() => {
|
|
T.value ? _() : w(null);
|
|
});
|
|
else if (E.value) {
|
|
const X = g(E.value), pe = M.value.map((De) => De.items).reduce((De, Ie) => [...De, ...Ie], []).findIndex((De) => g(De) === X);
|
|
pe >= 0 ? xe(() => x(pe)) : w(null);
|
|
}
|
|
}
|
|
);
|
|
const M = n(() => o.groupField ? o.groupOptions ? o.data.map((X) => {
|
|
const oe = ze(X, o.groupField), pe = ze(X, o.groupOptions);
|
|
return { group: oe, items: pe };
|
|
}) : Object.keys(o.data).map((X) => ({
|
|
group: X,
|
|
items: o.data[X]
|
|
})) : !o.openOnFocus && !o.keepOpen && V.value === "" ? [{ items: [] }] : [{ items: o.data }]), Y = n(
|
|
() => {
|
|
var X;
|
|
return !((X = M.value) != null && X.some(
|
|
(oe) => oe.items && oe.items.length
|
|
));
|
|
}
|
|
);
|
|
fe(Y, (X) => {
|
|
C.value && (T.value = !X || !!u.empty);
|
|
});
|
|
const J = n(() => {
|
|
const X = ["escape"];
|
|
return o.keepOpen || (X.push("content"), X.push("outside")), X;
|
|
});
|
|
function j(X) {
|
|
X === "outside" && o.keepFirst && E.value && o.selectOnClickOutside && R(E.value, !0);
|
|
}
|
|
function g(X) {
|
|
if (!X)
|
|
return "";
|
|
const oe = o.field && typeof X == "object" ? ze(X, o.field) : X;
|
|
return (typeof o.formatter == "function" ? o.formatter(oe) : oe) || "";
|
|
}
|
|
function w(X) {
|
|
X !== void 0 && (E.value = t(X) ? null : X, K.value = X === 0, te.value = X === 1, O.value = null);
|
|
}
|
|
function x(X) {
|
|
const oe = qe(m.value[X]);
|
|
O.value = oe ? oe.id : null;
|
|
}
|
|
function R(X, oe = !0, pe = void 0) {
|
|
if (X !== void 0) {
|
|
if (I.value = X, r("select", I.value, pe), I.value !== null) {
|
|
if (o.clearOnSelect) {
|
|
const De = c.value.$el.querySelector("input");
|
|
De.value = "";
|
|
} else
|
|
V.value = g(I.value);
|
|
w(null);
|
|
}
|
|
oe && xe(() => T.value = !1), b();
|
|
}
|
|
}
|
|
function _() {
|
|
xe(() => {
|
|
const X = M.value.filter(
|
|
(oe) => oe.items && oe.items.length
|
|
);
|
|
if (X.length) {
|
|
const oe = X[0].items[0];
|
|
w(oe), x(0);
|
|
} else
|
|
w(null);
|
|
});
|
|
}
|
|
function N(X, oe, pe = !0) {
|
|
o.selectableHeader && (K.value || oe === 0) && (r("select-header", X), oe && w(null), pe && (T.value = !1)), o.selectableFooter && (te.value || oe === 1) && (r("select-footer", X), oe && w(null), pe && (T.value = !1));
|
|
}
|
|
function L(X) {
|
|
if (!T.value) {
|
|
T.value = !0;
|
|
return;
|
|
}
|
|
const oe = M.value.map((xt) => xt.items).reduce((xt, Jt) => [...xt, ...Jt], []);
|
|
v.value && o.selectableHeader && oe.unshift(void 0), d.value && o.selectableFooter && oe.push(void 0);
|
|
let pe = oe.map(at).indexOf(at(E.value));
|
|
K.value ? pe = 0 + X : te.value ? pe = oe.length - 1 + X : pe = pe + X, pe = pe > oe.length - 1 ? oe.length - 1 : pe, pe = pe < 0 ? 0 : pe, d.value && o.selectableFooter && pe === oe.length - 1 ? w(
|
|
1
|
|
/* Footer */
|
|
) : v.value && o.selectableHeader && pe === 0 ? w(
|
|
0
|
|
/* Header */
|
|
) : w(oe[pe] !== void 0 ? oe[pe] : null);
|
|
let De = m.value || [];
|
|
v.value && o.selectableHeader && (De = [v.value, ...De]), d.value && o.selectableFooter && (De = [...De, d.value]);
|
|
const Ie = qe(De[pe]);
|
|
if (!Ie)
|
|
return;
|
|
O.value = Ie.id;
|
|
const Ye = qe(y.value.$content), bt = Ye.scrollTop, Dt = Ye.scrollTop + Ye.clientHeight - Ie.clientHeight;
|
|
Ie.offsetTop < bt ? Ye.scrollTop = Ie.offsetTop : Ie.offsetTop >= Dt && (Ye.scrollTop = Ie.offsetTop - Ye.clientHeight + Ie.clientHeight), o.checkScroll && Je();
|
|
}
|
|
function H(X) {
|
|
if (X.key === "Enter" && X.preventDefault(), o.confirmKeys.indexOf(X.key) >= 0) {
|
|
X.key === "," && X.preventDefault();
|
|
const oe = !o.keepOpen || X.key === "Tab";
|
|
if (E.value === null) {
|
|
N(X, null, oe);
|
|
return;
|
|
}
|
|
R(E.value, oe, X);
|
|
}
|
|
}
|
|
function Q(X) {
|
|
g(I.value) === V.value && c.value.$el.querySelector("input").select(), o.openOnFocus && (T.value = !0, o.keepFirst && _()), B(X);
|
|
}
|
|
function ne(X) {
|
|
S(X);
|
|
}
|
|
function Ae(X) {
|
|
const oe = g(I.value);
|
|
oe && oe === V.value || Pe(X);
|
|
}
|
|
let Pe = ia(Re, o.debounce || 0);
|
|
Ha(() => {
|
|
Pe = ia(Re, o.debounce);
|
|
});
|
|
function Re(X) {
|
|
r("input", X), b();
|
|
}
|
|
const Le = n(
|
|
() => o.clearable && V.value && o.clearIcon ? o.clearIcon : o.iconRight
|
|
), we = n(
|
|
() => o.clearable ? !0 : o.iconRightClickable
|
|
);
|
|
function je(X) {
|
|
o.clearable ? (V.value = "", R(null, !1), o.openOnFocus && p()) : r("icon-right-click", X);
|
|
}
|
|
it(() => {
|
|
Me && o.checkScroll && _e(
|
|
"scroll",
|
|
Je,
|
|
y.value.$content,
|
|
{ immediate: !0 }
|
|
);
|
|
});
|
|
function Je() {
|
|
var Ie, Ye;
|
|
const X = qe(y.value.$content);
|
|
if (!X)
|
|
return;
|
|
const oe = X.offsetTop, pe = ((Ie = v.value) == null ? void 0 : Ie.clientHeight) || 0, De = (((Ye = d.value) == null ? void 0 : Ye.clientHeight) || 0) + oe;
|
|
X.clientHeight !== X.scrollHeight && (X.scrollTop + X.clientHeight + De >= X.scrollHeight ? r("scroll-end") : X.scrollTop <= pe && r("scroll-start"));
|
|
}
|
|
const Qe = da(), ae = n(() => ({
|
|
...Qe,
|
|
...o.inputClasses
|
|
})), ee = h(["rootClass", "o-acp"]), q = h(["itemClass", "o-acp__item"]), Ce = h([
|
|
"itemEmptyClass",
|
|
"o-acp__item--empty"
|
|
]), le = h([
|
|
"itemGroupTitleClass",
|
|
"o-acp__item-group-title"
|
|
]), Ue = h(
|
|
["itemHeaderClass", "o-acp__item-header"],
|
|
["itemHoverClass", "o-acp__item--hover", null, K]
|
|
), Ze = h(
|
|
["itemFooterClass", "o-acp__item-footer"],
|
|
["itemHoverClass", "o-acp__item--hover", null, te]
|
|
);
|
|
function We(X) {
|
|
const oe = h([
|
|
"itemHoverClass",
|
|
"o-acp__item--hover",
|
|
null,
|
|
at(X) === at(E.value)
|
|
]);
|
|
return [...q.value, ...oe.value];
|
|
}
|
|
return l({ focus: p }), (X, oe) => (f(), ie(va, {
|
|
ref_key: "dropdownRef",
|
|
ref: y,
|
|
modelValue: I.value,
|
|
"onUpdate:modelValue": oe[7] || (oe[7] = (pe) => I.value = pe),
|
|
active: T.value,
|
|
"onUpdate:active": oe[8] || (oe[8] = (pe) => T.value = pe),
|
|
"data-oruga": "autocomplete",
|
|
class: P(s(ee)),
|
|
"menu-id": s(D),
|
|
"menu-tabindex": -1,
|
|
"menu-tag": e.menuTag,
|
|
scrollable: "",
|
|
"aria-role": "listbox",
|
|
tabindex: -1,
|
|
"trap-focus": !1,
|
|
triggers: [],
|
|
disabled: e.disabled,
|
|
closeable: J.value,
|
|
"mobile-modal": e.mobileModal,
|
|
"max-height": e.maxHeight,
|
|
animation: e.animation,
|
|
position: e.position,
|
|
teleport: e.teleport,
|
|
expanded: e.expanded,
|
|
onClose: j
|
|
}, {
|
|
trigger: ue(() => [
|
|
me(Ft, ye({
|
|
ref_key: "inputRef",
|
|
ref: c
|
|
}, ae.value, {
|
|
modelValue: V.value,
|
|
"onUpdate:modelValue": [
|
|
oe[0] || (oe[0] = (pe) => V.value = pe),
|
|
Ae
|
|
],
|
|
type: e.type,
|
|
size: e.size,
|
|
rounded: e.rounded,
|
|
icon: e.icon,
|
|
"icon-right": Le.value,
|
|
"icon-right-clickable": we.value,
|
|
"icon-pack": e.iconPack,
|
|
placeholder: e.placeholder,
|
|
maxlength: e.maxlength,
|
|
autocomplete: e.autocomplete,
|
|
"use-html5-validation": !1,
|
|
role: "combobox",
|
|
"aria-activedescendant": O.value,
|
|
"aria-autocomplete": e.keepFirst ? "both" : "list",
|
|
"aria-controls": s(D),
|
|
"aria-expanded": T.value,
|
|
expanded: e.expanded,
|
|
disabled: e.disabled,
|
|
"status-icon": e.statusIcon,
|
|
onFocus: Q,
|
|
onBlur: ne,
|
|
onInvalid: s(F),
|
|
onKeydown: [
|
|
H,
|
|
oe[1] || (oe[1] = he(ve((pe) => L(-1), ["prevent"]), ["up"])),
|
|
oe[2] || (oe[2] = he(ve((pe) => L(1), ["prevent"]), ["down"]))
|
|
],
|
|
onIconClick: oe[3] || (oe[3] = (pe) => X.$emit("icon-click", pe)),
|
|
onIconRightClick: je
|
|
}), null, 16, ["modelValue", "type", "size", "rounded", "icon", "icon-right", "icon-right-clickable", "icon-pack", "placeholder", "maxlength", "autocomplete", "aria-activedescendant", "aria-autocomplete", "aria-controls", "aria-expanded", "expanded", "disabled", "status-icon", "onInvalid"])
|
|
]),
|
|
default: ue(() => [
|
|
X.$slots.header ? (f(), ie(Ct, {
|
|
key: 0,
|
|
id: `${s(D)}-header`,
|
|
ref_key: "headerRef",
|
|
ref: v,
|
|
tag: e.itemTag,
|
|
"aria-role": "option",
|
|
"aria-selected": K.value,
|
|
tabindex: -1,
|
|
class: P([...s(q), ...s(Ue)]),
|
|
onClick: oe[4] || (oe[4] = (pe, De) => N(
|
|
De,
|
|
0
|
|
/* Header */
|
|
))
|
|
}, {
|
|
default: ue(() => [
|
|
Z(X.$slots, "header")
|
|
]),
|
|
_: 3
|
|
}, 8, ["id", "tag", "aria-selected", "class"])) : G("", !0),
|
|
(f(!0), $(ke, null, $e(M.value, (pe, De) => (f(), $(ke, null, [
|
|
pe.group ? (f(), ie(Ct, {
|
|
key: De + "group",
|
|
tag: e.itemTag,
|
|
tabindex: -1,
|
|
class: P([...s(q), ...s(le)])
|
|
}, {
|
|
default: ue(() => [
|
|
X.$slots.group ? Z(X.$slots, "group", {
|
|
key: 0,
|
|
group: pe.group,
|
|
index: De
|
|
}) : (f(), $("span", fn, ce(pe.group), 1))
|
|
]),
|
|
_: 2
|
|
}, 1032, ["tag", "class"])) : G("", !0),
|
|
(f(!0), $(ke, null, $e(pe.items, (Ie, Ye) => (f(), ie(Ct, {
|
|
id: `${s(D)}-${De}-${Ye}`,
|
|
key: De + ":" + Ye,
|
|
ref_for: !0,
|
|
ref: (bt) => k(bt, De, Ye),
|
|
value: Ie,
|
|
tag: e.itemTag,
|
|
class: P(We(Ie)),
|
|
"aria-role": "option",
|
|
"aria-selected": at(Ie) === at(E.value),
|
|
tabindex: -1,
|
|
onClick: oe[5] || (oe[5] = (bt, Dt) => R(bt, !e.keepOpen, Dt))
|
|
}, {
|
|
default: ue(() => [
|
|
X.$slots.default ? Z(X.$slots, "default", {
|
|
key: 0,
|
|
option: Ie,
|
|
value: g(Ie),
|
|
index: Ye
|
|
}) : (f(), $("span", vn, ce(g(Ie)), 1))
|
|
]),
|
|
_: 2
|
|
}, 1032, ["id", "value", "tag", "class", "aria-selected"]))), 128))
|
|
], 64))), 256)),
|
|
Y.value && X.$slots.empty ? (f(), ie(Ct, {
|
|
key: 1,
|
|
tag: e.itemTag,
|
|
class: P([...s(q), ...s(Ce)])
|
|
}, {
|
|
default: ue(() => [
|
|
Z(X.$slots, "empty")
|
|
]),
|
|
_: 3
|
|
}, 8, ["tag", "class"])) : G("", !0),
|
|
X.$slots.footer ? (f(), ie(Ct, {
|
|
key: 2,
|
|
id: `${s(D)}-footer`,
|
|
ref_key: "footerRef",
|
|
ref: d,
|
|
tag: e.itemTag,
|
|
"aria-role": "option",
|
|
"aria-selected": te.value,
|
|
tabindex: -1,
|
|
class: P([...s(q), ...s(Ze)]),
|
|
onClick: oe[6] || (oe[6] = (pe, De) => N(
|
|
De,
|
|
1
|
|
/* Footer */
|
|
))
|
|
}, {
|
|
default: ue(() => [
|
|
Z(X.$slots, "footer")
|
|
]),
|
|
_: 3
|
|
}, 8, ["id", "tag", "aria-selected", "class"])) : G("", !0)
|
|
]),
|
|
_: 3
|
|
}, 8, ["modelValue", "active", "class", "menu-id", "menu-tag", "disabled", "closeable", "mobile-modal", "max-height", "animation", "position", "teleport", "expanded"]));
|
|
}
|
|
}), pn = {
|
|
install(e) {
|
|
Fe(e, Za);
|
|
}
|
|
}, At = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OButton",
|
|
configField: "button",
|
|
__name: "Button",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/**
|
|
* Button tag name
|
|
* @values button, a, input, router-link, nuxt-link (or other nuxt alias)
|
|
*/
|
|
tag: {
|
|
type: [String, Object, Function],
|
|
default: () => i("button.tag", "button")
|
|
},
|
|
/**
|
|
* Color variant of the control
|
|
* @values primary, info, success, warning, danger, and any other custom color
|
|
*/
|
|
variant: {
|
|
type: String,
|
|
default: () => i("button.variant")
|
|
},
|
|
/**
|
|
* Size of the control
|
|
* @values small, medium, large
|
|
*/
|
|
size: {
|
|
type: String,
|
|
default: () => i("button.size")
|
|
},
|
|
/** Button label, unnecessary when default slot is used */
|
|
label: { type: String, default: void 0 },
|
|
/**
|
|
* Icon pack to use
|
|
* @values mdi, fa, fas and any other custom icon pack
|
|
*/
|
|
iconPack: {
|
|
type: String,
|
|
default: () => i("button.iconPack", void 0)
|
|
},
|
|
/** Icon name to show on the left */
|
|
iconLeft: { type: String, default: void 0 },
|
|
/** Icon name to show on the right */
|
|
iconRight: { type: String, default: void 0 },
|
|
/** Enable rounded style */
|
|
rounded: {
|
|
type: Boolean,
|
|
default: () => i("button.rounded", !1)
|
|
},
|
|
/** Button will be expanded (full-width) */
|
|
expanded: { type: Boolean, default: !1 },
|
|
/** Button will be disabled */
|
|
disabled: { type: Boolean, default: !1 },
|
|
/** Enable outlined style */
|
|
outlined: { type: Boolean, default: !1 },
|
|
/** Enable loading style */
|
|
loading: { type: Boolean, default: !1 },
|
|
/** Enable inverted style */
|
|
inverted: { type: Boolean, default: !1 },
|
|
/** Button type, like native */
|
|
nativeType: {
|
|
type: String,
|
|
default: "button",
|
|
validator: (e) => ["button", "submit", "reset"].indexOf(e) >= 0
|
|
},
|
|
/** Accessibility Role attribute to be passed to the button. */
|
|
role: {
|
|
type: String,
|
|
default: () => i("button.role", "button")
|
|
},
|
|
/**
|
|
* This is used internally
|
|
* @ignore
|
|
*/
|
|
iconBoth: { type: Boolean, default: !1 },
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the button elements wrapper */
|
|
wrapperClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the button when outlined */
|
|
outlinedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the button with loading */
|
|
loadingClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the button when inverted */
|
|
invertedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the button when expanded */
|
|
expandedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the button when rounded */
|
|
roundedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the button when disabled */
|
|
disabledClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the button icon */
|
|
iconClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the button icon on the left */
|
|
iconLeftClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the button icon on the right */
|
|
iconRightClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the button label */
|
|
labelClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the button size */
|
|
sizeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the button variant */
|
|
variantClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
setup(e) {
|
|
const l = e, a = n(
|
|
() => typeof l.disabled < "u" && l.disabled !== !1 ? "button" : l.tag
|
|
), t = n(
|
|
() => l.tag === "button" || l.tag === "input" ? l.nativeType : null
|
|
), o = n(() => l.disabled ? !0 : null), r = h(
|
|
["rootClass", "o-btn"],
|
|
[
|
|
"sizeClass",
|
|
"o-btn--",
|
|
n(() => l.size),
|
|
n(() => !!l.size)
|
|
],
|
|
[
|
|
"variantClass",
|
|
"o-btn--",
|
|
n(() => l.variant),
|
|
n(() => !!l.variant)
|
|
],
|
|
[
|
|
"outlinedClass",
|
|
"o-btn--outlined",
|
|
null,
|
|
n(() => l.outlined && !l.variant)
|
|
],
|
|
[
|
|
"invertedClass",
|
|
"o-btn--inverted",
|
|
null,
|
|
n(() => l.inverted && !l.variant)
|
|
],
|
|
[
|
|
"outlinedClass",
|
|
"o-btn--outlined-",
|
|
n(() => l.variant),
|
|
n(() => l.outlined && !!l.variant)
|
|
],
|
|
[
|
|
"invertedClass",
|
|
"o-btn--inverted-",
|
|
n(() => l.variant),
|
|
n(() => l.inverted && !!l.variant)
|
|
],
|
|
["expandedClass", "o-btn--expanded", null, n(() => l.expanded)],
|
|
["loadingClass", "o-btn--loading", null, n(() => l.loading)],
|
|
["roundedClass", "o-btn--rounded", null, n(() => l.rounded)],
|
|
["disabledClass", "o-btn--disabled", null, n(() => l.disabled)]
|
|
), u = h(["labelClass", "o-btn__label"]), c = h(["iconClass", "o-btn__icon"]), y = h(["iconLeftClass", "o-btn__icon-left"]), d = h(["iconRightClass", "o-btn__icon-right"]), v = h(["wrapperClass", "o-btn__wrapper"]);
|
|
return (m, k) => (f(), ie(Ke(a.value), {
|
|
disabled: o.value,
|
|
type: t.value,
|
|
class: P(s(r)),
|
|
role: e.role,
|
|
"data-oruga": "button"
|
|
}, {
|
|
default: ue(() => [
|
|
se("span", {
|
|
class: P(s(v))
|
|
}, [
|
|
e.iconLeft ? (f(), ie(Te, {
|
|
key: 0,
|
|
pack: e.iconPack,
|
|
icon: e.iconLeft,
|
|
size: e.size,
|
|
both: e.iconBoth,
|
|
class: P([...s(c), ...s(y)])
|
|
}, null, 8, ["pack", "icon", "size", "both", "class"])) : G("", !0),
|
|
e.label || m.$slots.default ? (f(), $("span", {
|
|
key: 1,
|
|
class: P(s(u))
|
|
}, [
|
|
Z(m.$slots, "default", {}, () => [
|
|
Ve(ce(e.label), 1)
|
|
])
|
|
], 2)) : G("", !0),
|
|
e.iconRight ? (f(), ie(Te, {
|
|
key: 2,
|
|
pack: e.iconPack,
|
|
icon: e.iconRight,
|
|
size: e.size,
|
|
both: e.iconBoth,
|
|
class: P([...s(c), ...s(d)])
|
|
}, null, 8, ["pack", "icon", "size", "both", "class"])) : G("", !0)
|
|
], 2)
|
|
]),
|
|
_: 3
|
|
}, 8, ["disabled", "type", "class", "role"]));
|
|
}
|
|
}), mn = {
|
|
install(e) {
|
|
Fe(e, At);
|
|
}
|
|
}, yn = ["onFocus", "onMouseover", "onClick", "onKeypress"], gn = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OCarousel",
|
|
configField: "carousel",
|
|
__name: "Carousel",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** @model */
|
|
modelValue: { type: Number, default: 0 },
|
|
/** Enable drag mode */
|
|
dragable: { type: Boolean, default: !0 },
|
|
/** Timer interval for `autoplay` */
|
|
interval: {
|
|
type: Number,
|
|
default: () => i("carousel.interval", 3500)
|
|
},
|
|
/** Move item automaticalls after `interval` */
|
|
autoplay: { type: Boolean, default: !1 },
|
|
/** Pause autoplay on hover */
|
|
pauseHover: { type: Boolean, default: !1 },
|
|
/** Repeat from the beginning after reaching the end */
|
|
repeat: { type: Boolean, default: !1 },
|
|
/** Show an overlay */
|
|
overlay: { type: Boolean, default: !1 },
|
|
/** Enable indicators */
|
|
indicators: { type: Boolean, default: !0 },
|
|
/** Place indicators inside the carousel */
|
|
indicatorInside: { type: Boolean, default: !1 },
|
|
/**
|
|
* Indicator interaction mode
|
|
* @values click, hover
|
|
*/
|
|
indicatorMode: {
|
|
type: String,
|
|
default: "click",
|
|
validator: (e) => ["click", "hover"].indexOf(e) >= 0
|
|
},
|
|
/** Position of the indicator - depends on used theme */
|
|
indicatorPosition: {
|
|
type: String,
|
|
default: () => i("carousel.indicatorPosition", "bottom")
|
|
},
|
|
/** Style of the indicator - depends on used theme */
|
|
indicatorStyle: {
|
|
type: String,
|
|
default: () => i("carousel.indicatorStyle", "dots")
|
|
},
|
|
/** Number of items to show at once*/
|
|
itemsToShow: {
|
|
type: Number,
|
|
default: () => i("carousel.itemsToShow", 1)
|
|
},
|
|
/** Number of items to switch at once */
|
|
itemsToList: {
|
|
type: Number,
|
|
default: () => i("carousel.itemsToList", 1)
|
|
},
|
|
/** Show next / prev arrows */
|
|
arrows: {
|
|
type: Boolean,
|
|
default: () => i("carousel.arrows", !0)
|
|
},
|
|
/** Show next / prev arrows only on hover */
|
|
arrowsHover: {
|
|
type: Boolean,
|
|
default: () => i("carousel.arrowsHover", !0)
|
|
},
|
|
/**
|
|
* Icon pack to use
|
|
* @values mdi, fa, fas and any other custom icon pack
|
|
*/
|
|
iconPack: {
|
|
type: String,
|
|
default: () => i("carousel.iconPack")
|
|
},
|
|
/**
|
|
* Icon size
|
|
* @values small, medium, large
|
|
*/
|
|
iconSize: {
|
|
type: String,
|
|
default: () => i("carousel.iconSize")
|
|
},
|
|
/** Icon name for previous icon */
|
|
iconPrev: {
|
|
type: String,
|
|
default: () => i("carousel.iconPrev", "chevron-left")
|
|
},
|
|
/** Icon name for next icon */
|
|
iconNext: {
|
|
type: String,
|
|
default: () => i("carousel.iconNext", "chevron-right")
|
|
},
|
|
/** Define these props for different screen sizes */
|
|
breakpoints: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the root element in overlay */
|
|
overlayClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the wrapper element of carousel items */
|
|
wrapperClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of slider items */
|
|
itemsClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of slider items on drag */
|
|
itemsDraggingClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of arrow elements */
|
|
arrowIconClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of prev arrow element */
|
|
arrowIconPrevClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of next arrow element */
|
|
arrowIconNextClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of indicator link element */
|
|
indicatorClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of indicators wrapper element */
|
|
indicatorsClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of indicators wrapper element when inside */
|
|
indicatorsInsideClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of indicators wrapper element when inside and position */
|
|
indicatorsInsidePositionClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of indicator item element */
|
|
indicatorItemClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of indicator element when is active */
|
|
indicatorItemActiveClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of indicator element to separate different styles */
|
|
indicatorItemStyleClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
emits: ["update:modelValue", "scroll", "click"],
|
|
setup(e, { emit: l }) {
|
|
const a = e, t = l, o = z();
|
|
function r() {
|
|
R(), x();
|
|
}
|
|
const u = n(() => ({
|
|
restartTimer: r,
|
|
itemWidth: S.value,
|
|
activeIndex: d.value,
|
|
onClick: (le) => t("click", le),
|
|
setActive: (le) => D(le)
|
|
})), { childItems: c } = gt(o, { data: u }), y = Nt(a, t), d = z(a.modelValue), v = z(null), m = z(0), k = z(0);
|
|
fe(
|
|
() => a.modelValue,
|
|
(le) => {
|
|
le <= c.value.length - 1 && D(le * B.value.itemsToList, !0);
|
|
}
|
|
), fe([() => a.itemsToList, () => a.itemsToShow], () => F()), it(() => {
|
|
Me && (window.ResizeObserver && (v.value = new window.ResizeObserver(F), v.value.observe(o.value)), b(), x());
|
|
}), Tt(() => {
|
|
Me && (window.ResizeObserver && v.value.disconnect(), Re(), R());
|
|
}), Me && (_e("resize", b, window), _e("animationend", F), _e("transitionend", F), _e("transitionstart", F));
|
|
function b() {
|
|
m.value = window.innerWidth;
|
|
}
|
|
function F() {
|
|
xe(() => k.value++);
|
|
}
|
|
const B = n(() => {
|
|
const Ue = Object.keys(a.breakpoints).map(Number).sort((We, X) => X - We).filter(
|
|
(We) => m.value >= We
|
|
)[0], Ze = at(
|
|
Ue ? { ...a, ...a.breakpoints[Ue] } : a
|
|
);
|
|
return Ze.itemsToList || (Ze.itemsToList = 1), Ze.itemsToShow || (Ze.itemsToShow = 1), Vl(Ze);
|
|
}), S = n(() => m.value ? (k.value, o.value.getBoundingClientRect().width / B.value.itemsToShow) : 0), C = n(
|
|
() => -Fa(
|
|
Q.value + d.value * S.value,
|
|
0,
|
|
(c.value.length - B.value.itemsToShow) * S.value
|
|
)
|
|
), p = n(() => c.value.length), V = n(
|
|
() => Math.ceil(p.value / B.value.itemsToList)
|
|
), T = n(
|
|
() => Math.ceil(d.value / B.value.itemsToList)
|
|
), I = n(
|
|
() => B.value.arrowsHover && Y.value || !B.value.arrowsHover
|
|
), E = n(
|
|
() => (B.value.repeat || d.value > 0) && I.value
|
|
);
|
|
function K() {
|
|
D(d.value - B.value.itemsToList);
|
|
}
|
|
const te = n(
|
|
() => (B.value.repeat || d.value < p.value - 1) && I.value
|
|
);
|
|
function O() {
|
|
D(d.value + B.value.itemsToList);
|
|
}
|
|
function D(le, Ue) {
|
|
B.value.repeat && (le = Wt(le, p.value)), le = Fa(le, 0, p.value), d.value = le, t("scroll", T.value), Ue || (y.value = Math.ceil(le / B.value.itemsToList));
|
|
}
|
|
function M(le, Ue) {
|
|
a.indicatorMode === le && D(Ue * B.value.itemsToList);
|
|
}
|
|
const Y = z(!1), J = z(!1), j = z(null);
|
|
function g() {
|
|
Y.value = !0, _();
|
|
}
|
|
function w() {
|
|
Y.value = !1, x();
|
|
}
|
|
fe(
|
|
() => a.autoplay,
|
|
(le) => {
|
|
le ? x() : R();
|
|
}
|
|
), fe(
|
|
() => a.repeat,
|
|
(le) => {
|
|
le && x();
|
|
}
|
|
);
|
|
function x() {
|
|
!a.autoplay || j.value || (J.value = !1, j.value = setInterval(() => {
|
|
!a.repeat && !te.value ? R() : O();
|
|
}, a.interval));
|
|
}
|
|
function R() {
|
|
J.value = !0, j.value && (clearInterval(j.value), j.value = null);
|
|
}
|
|
function _() {
|
|
a.pauseHover && a.autoplay && R();
|
|
}
|
|
const N = z(!1), L = z(), H = z(0), Q = z(0), ne = n(() => nt(L.value));
|
|
function Ae(le) {
|
|
ne.value || !B.value.dragable || le.button !== 0 && le.type !== "touchstart" || (H.value = Date.now(), N.value = !!le.touches, L.value = N.value ? le.touches[0].clientX : le.clientX, N.value && R(), Me && (window.addEventListener(
|
|
N.value ? "touchmove" : "mousemove",
|
|
Pe
|
|
), window.addEventListener(
|
|
N.value ? "touchend" : "mouseup",
|
|
Re
|
|
)));
|
|
}
|
|
function Pe(le) {
|
|
if (!ne.value)
|
|
return;
|
|
const Ue = le.touches ? (le.changedTouches[0] || le.touches[0]).clientX : le.clientX;
|
|
Q.value = L.value - Ue, le.touches || le.preventDefault();
|
|
}
|
|
function Re(le) {
|
|
if (!(!ne.value && !H.value)) {
|
|
if (H.value) {
|
|
const Ue = Ll(Q.value), Ze = Math.round(
|
|
Math.abs(Q.value / S.value) + 0.15
|
|
);
|
|
D(d.value + Ue * Ze);
|
|
}
|
|
Q.value = 0, L.value = void 0, le != null && le.touches && x(), Me && (window.removeEventListener(
|
|
N.value ? "touchmove" : "mousemove",
|
|
Pe
|
|
), window.removeEventListener(
|
|
N.value ? "touchend" : "mouseup",
|
|
Re
|
|
));
|
|
}
|
|
}
|
|
const Le = h(
|
|
["rootClass", "o-car"],
|
|
["overlayClass", "o-car__overlay", null, n(() => a.overlay)]
|
|
), we = h(["wrapperClass", "o-car__wrapper"]), je = h(
|
|
["itemsClass", "o-car__items"],
|
|
["itemsDraggingClass", "o-car__items--dragging", null, ne]
|
|
), Je = h([
|
|
"arrowIconClass",
|
|
"o-car__arrow__icon"
|
|
]), Qe = h([
|
|
"arrowIconPrevClass",
|
|
"o-car__arrow__icon-prev"
|
|
]), ae = h([
|
|
"arrowIconNextClass",
|
|
"o-car__arrow__icon-next"
|
|
]);
|
|
function ee(le) {
|
|
return h(
|
|
["indicatorItemClass", "o-car__indicator__item"],
|
|
[
|
|
"indicatorItemActiveClass",
|
|
"o-car__indicator__item--active",
|
|
null,
|
|
T.value === le
|
|
],
|
|
[
|
|
"indicatorItemStyleClass",
|
|
"o-car__indicator__item--",
|
|
a.indicatorStyle,
|
|
!!a.indicatorStyle
|
|
]
|
|
).value;
|
|
}
|
|
const q = h(
|
|
["indicatorsClass", "o-car__indicators"],
|
|
[
|
|
"indicatorsInsideClass",
|
|
"o-car__indicators--inside",
|
|
null,
|
|
n(() => !!a.indicatorInside)
|
|
],
|
|
[
|
|
"indicatorsInsidePositionClass",
|
|
"o-car__indicators--inside--",
|
|
n(() => a.indicatorPosition),
|
|
n(() => a.indicatorInside && !!a.indicatorPosition)
|
|
]
|
|
), Ce = h(["indicatorClass", "o-car__indicator"]);
|
|
return (le, Ue) => (f(), $("div", {
|
|
ref_key: "rootRef",
|
|
ref: o,
|
|
class: P(s(Le)),
|
|
"data-oruga": "carousel",
|
|
role: "region",
|
|
onMouseover: g,
|
|
onMouseleave: w,
|
|
onFocus: g,
|
|
onBlur: w,
|
|
onKeydown: [
|
|
he(K, ["left"]),
|
|
he(O, ["right"])
|
|
]
|
|
}, [
|
|
se("div", {
|
|
class: P(s(we))
|
|
}, [
|
|
se("div", {
|
|
class: P(s(je)),
|
|
style: et("transform:translateX(" + C.value + "px)"),
|
|
tabindex: "0",
|
|
role: "group",
|
|
draggable: "true",
|
|
"aria-roledescription": "carousel",
|
|
onMousedown: Ae,
|
|
onTouchstart: Ae
|
|
}, [
|
|
Z(le.$slots, "default")
|
|
], 38),
|
|
Z(le.$slots, "arrow", {
|
|
hasPrev: E.value,
|
|
prev: K,
|
|
hasNext: te.value,
|
|
next: O
|
|
}, () => [
|
|
e.arrows ? (f(), $(ke, { key: 0 }, [
|
|
Oe(me(Te, {
|
|
class: P([...s(Je), ...s(Qe)]),
|
|
pack: e.iconPack,
|
|
icon: e.iconPrev,
|
|
size: e.iconSize,
|
|
both: "",
|
|
role: "button",
|
|
tabindex: "0",
|
|
onClick: K,
|
|
onKeydown: he(K, ["enter"])
|
|
}, null, 8, ["class", "pack", "icon", "size"]), [
|
|
[Ne, E.value]
|
|
]),
|
|
Oe(me(Te, {
|
|
class: P([...s(Je), ...s(ae)]),
|
|
pack: e.iconPack,
|
|
icon: e.iconNext,
|
|
size: e.iconSize,
|
|
both: "",
|
|
role: "button",
|
|
tabindex: "0",
|
|
onClick: O,
|
|
onKeydown: he(O, ["enter"])
|
|
}, null, 8, ["class", "pack", "icon", "size"]), [
|
|
[Ne, te.value]
|
|
])
|
|
], 64)) : G("", !0)
|
|
])
|
|
], 2),
|
|
Z(le.$slots, "indicators", {
|
|
active: s(y),
|
|
switchTo: D,
|
|
indicatorIndex: T.value
|
|
}, () => [
|
|
s(c).length ? (f(), $(ke, { key: 0 }, [
|
|
e.indicators ? (f(), $("div", {
|
|
key: 0,
|
|
class: P(s(q)),
|
|
role: "group"
|
|
}, [
|
|
(f(!0), $(ke, null, $e(V.value, (Ze, We) => (f(), $("div", {
|
|
key: We,
|
|
class: P(s(Ce)),
|
|
role: "button",
|
|
tabindex: "0",
|
|
onFocus: (X) => M("hover", We),
|
|
onMouseover: (X) => M("hover", We),
|
|
onClick: (X) => M("click", We),
|
|
onKeypress: he((X) => M("click", We), ["enter"])
|
|
}, [
|
|
Z(le.$slots, "indicator", { index: We }, () => [
|
|
se("span", {
|
|
class: P(ee(We))
|
|
}, null, 2)
|
|
])
|
|
], 42, yn))), 128))
|
|
], 2)) : G("", !0)
|
|
], 64)) : G("", !0)
|
|
]),
|
|
e.overlay ? Z(le.$slots, "overlay", { key: 0 }) : G("", !0)
|
|
], 34));
|
|
}
|
|
}), bn = ["data-id", "role", "aria-selected"], Cn = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OCarouselItem",
|
|
configField: "carousel",
|
|
__name: "CarouselItem",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** Make item clickable */
|
|
clickable: { type: Boolean, default: !1 },
|
|
/** Role attribute to be passed to the div wrapper for better accessibility */
|
|
ariaRole: {
|
|
type: String,
|
|
default: () => i("carousel.ariaRole", "option")
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of carousel item */
|
|
itemClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of carousel item when is active */
|
|
itemActiveClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of carousel item when is clickable */
|
|
itemClickableClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
setup(e) {
|
|
const l = e, { parent: a, item: t } = yt(), o = n(() => a.value.activeIndex === t.value.index), r = n(() => ({ width: `${a.value.itemWidth}px` }));
|
|
function u(y) {
|
|
o.value && a.value.onClick(y), l.clickable && a.value.setActive(t.value.index);
|
|
}
|
|
const c = h(
|
|
["itemClass", "o-car__item"],
|
|
["itemActiveClass", "o-car__item--active", null, o],
|
|
[
|
|
"itemClickableClass",
|
|
"o-car__item--clickable",
|
|
null,
|
|
n(() => l.clickable)
|
|
]
|
|
);
|
|
return (y, d) => (f(), $("div", {
|
|
class: P(s(c)),
|
|
style: et(r.value),
|
|
"data-id": `carousel-${s(t).identifier}`,
|
|
"data-oruga": "carousel-item",
|
|
role: e.ariaRole,
|
|
"aria-roledescription": "item",
|
|
"aria-selected": o.value,
|
|
onClick: u,
|
|
onKeypress: he(u, ["enter"])
|
|
}, [
|
|
Z(y.$slots, "default")
|
|
], 46, bn));
|
|
}
|
|
}), hn = {
|
|
install(e) {
|
|
Fe(e, gn), Fe(e, Cn);
|
|
}
|
|
}, kn = ["aria-checked"], Sn = ["disabled", "required", "name", "autocomplete", "value", ".indeterminate", "true-value", "false-value"], Pt = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OCheckbox",
|
|
configField: "checkbox",
|
|
inheritAttrs: !1,
|
|
__name: "Checkbox",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** @model */
|
|
modelValue: { type: [String, Number, Boolean, Array], default: void 0 },
|
|
/**
|
|
* Color of the control
|
|
* @values primary, info, success, warning, danger, and any other custom color
|
|
*/
|
|
variant: {
|
|
type: String,
|
|
default: () => i("checkbox.variant")
|
|
},
|
|
/**
|
|
* Size of the control
|
|
* @values small, medium, large
|
|
*/
|
|
size: {
|
|
type: String,
|
|
default: () => i("checkbox.size")
|
|
},
|
|
/** Input label, unnecessary when default slot is used */
|
|
label: { type: String, default: void 0 },
|
|
/** Same as native indeterminate */
|
|
indeterminate: { type: Boolean, default: !1 },
|
|
/** Same as native value */
|
|
nativeValue: { type: [String, Number, Boolean], default: void 0 },
|
|
/** Same as native disabled */
|
|
disabled: { type: Boolean, default: !1 },
|
|
/** Same as native required */
|
|
required: { type: Boolean, default: !1 },
|
|
/** Same as native name */
|
|
name: { type: String, default: void 0 },
|
|
/** Overrides the returned value when it's checked */
|
|
trueValue: { type: [String, Number, Boolean], default: !0 },
|
|
/** Overrides the returned value when it's not checked */
|
|
falseValue: { type: [String, Number, Boolean], default: !1 },
|
|
/** Same as native autocomplete options to use in HTML5 validation */
|
|
autocomplete: {
|
|
type: String,
|
|
default: () => i("checkbox.autocomplete", "off")
|
|
},
|
|
/** Enable html 5 native validation */
|
|
useHtml5Validation: {
|
|
type: Boolean,
|
|
default: () => i("useHtml5Validation", !0)
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class when checkbox is disabled */
|
|
disabledClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the root element when checked */
|
|
checkedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the checkbox input */
|
|
inputClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the checkbox input when checked */
|
|
inputCheckedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class when checkbox is indeterminate */
|
|
indeterminateClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the checkbox labe */
|
|
labelClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the checkbox size */
|
|
sizeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the checkbox variant */
|
|
variantClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
emits: ["update:modelValue", "input", "update:indeterminate", "focus", "blur", "invalid"],
|
|
setup(e, { expose: l, emit: a }) {
|
|
const t = e, o = a, r = z(), { onBlur: u, onFocus: c, onInvalid: y, setFocus: d } = rt(
|
|
r,
|
|
o,
|
|
t
|
|
), v = Nt(t, o, { passive: !0 }), m = st("indeterminate", t, o), k = n(
|
|
() => v.value === t.trueValue || Array.isArray(v.value) && v.value.includes(t.nativeValue)
|
|
);
|
|
function b(C) {
|
|
o("input", v.value, C);
|
|
}
|
|
const F = h(
|
|
["rootClass", "o-chk"],
|
|
["checkedClass", "o-chk--checked", null, k],
|
|
[
|
|
"sizeClass",
|
|
"o-chk--",
|
|
n(() => t.size),
|
|
n(() => !!t.size)
|
|
],
|
|
["disabledClass", "o-chk--disabled", null, n(() => t.disabled)],
|
|
[
|
|
"variantClass",
|
|
"o-chk--",
|
|
n(() => t.variant),
|
|
n(() => !!t.variant)
|
|
]
|
|
), B = h(
|
|
["inputClass", "o-chk__input"],
|
|
["inputCheckedClass", "o-chk__input--checked", null, k],
|
|
[
|
|
"indeterminateClass",
|
|
"o-chk__input--indeterminate",
|
|
null,
|
|
m
|
|
]
|
|
), S = h(["labelClass", "o-chk__label"]);
|
|
return l({ focus: d }), (C, p) => (f(), $("label", {
|
|
ref: "label",
|
|
class: P(s(F)),
|
|
"data-oruga": "checkbox",
|
|
role: "checkbox",
|
|
"aria-checked": k.value,
|
|
onClick: p[5] || (p[5] = ve(
|
|
//@ts-ignore
|
|
(...V) => s(d) && s(d)(...V),
|
|
["stop"]
|
|
)),
|
|
onKeydown: p[6] || (p[6] = he(ve(
|
|
//@ts-ignore
|
|
(...V) => s(d) && s(d)(...V),
|
|
["prevent"]
|
|
), ["enter"]))
|
|
}, [
|
|
Oe(se("input", ye(C.$attrs, {
|
|
ref_key: "inputRef",
|
|
ref: r,
|
|
"onUpdate:modelValue": p[0] || (p[0] = (V) => dt(v) ? v.value = V : null),
|
|
type: "checkbox",
|
|
"data-oruga-input": "checkbox",
|
|
class: s(B),
|
|
disabled: e.disabled,
|
|
required: e.required,
|
|
name: e.name,
|
|
autocomplete: e.autocomplete,
|
|
value: e.nativeValue,
|
|
".indeterminate": e.indeterminate,
|
|
"true-value": e.trueValue,
|
|
"false-value": e.falseValue,
|
|
onClick: p[1] || (p[1] = ve(() => {
|
|
}, ["stop"])),
|
|
onBlur: p[2] || (p[2] = //@ts-ignore
|
|
(...V) => s(u) && s(u)(...V)),
|
|
onFocus: p[3] || (p[3] = //@ts-ignore
|
|
(...V) => s(c) && s(c)(...V)),
|
|
onInvalid: p[4] || (p[4] = //@ts-ignore
|
|
(...V) => s(y) && s(y)(...V)),
|
|
onInput: b
|
|
}), null, 48, Sn), [
|
|
[Na, s(v)]
|
|
]),
|
|
e.label || C.$slots.default ? (f(), $("span", {
|
|
key: 0,
|
|
class: P(s(S))
|
|
}, [
|
|
Z(C.$slots, "default", {}, () => [
|
|
Ve(ce(e.label), 1)
|
|
])
|
|
], 2)) : G("", !0)
|
|
], 42, kn));
|
|
}
|
|
}), Fn = {
|
|
install(e) {
|
|
Fe(e, Pt);
|
|
}
|
|
}, An = ["id"], wn = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OCollapse",
|
|
configField: "collapse",
|
|
__name: "Collapse",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** Whether collapse is open or not, use v-model:open to make it two-way binding */
|
|
open: { type: Boolean, default: !0 },
|
|
/** Custom animation (transition name) */
|
|
animation: {
|
|
type: String,
|
|
default: () => i("collapse.animation", "fade")
|
|
},
|
|
/** Id property of the content container */
|
|
contentId: { type: String, default: () => ot() },
|
|
/**
|
|
* Trigger position
|
|
* @values top, bottom
|
|
*/
|
|
position: {
|
|
type: String,
|
|
default: () => i("collapse.position", "top"),
|
|
validator: (e) => ["top", "bottom"].indexOf(e) > -1
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the trigger element */
|
|
triggerClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the content */
|
|
contentClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
emits: ["update:open", "open", "close"],
|
|
setup(e, { emit: l }) {
|
|
const a = e, t = l, o = st("open", a, t, { passive: !0 });
|
|
function r() {
|
|
o.value = !o.value, o.value ? t("open") : t("close");
|
|
}
|
|
const u = h(["rootClass", "o-clps"]), c = h(["triggerClass", "o-clps__trigger"]), y = h(["contentClass", "o-clps__content"]);
|
|
return (d, v) => (f(), $("div", {
|
|
class: P(s(u)),
|
|
"data-oruga": "collapse"
|
|
}, [
|
|
e.position === "top" ? (f(), $("div", {
|
|
key: 0,
|
|
class: P(s(c)),
|
|
role: "button",
|
|
tabindex: "0",
|
|
onClick: r,
|
|
onKeydown: he(r, ["enter"])
|
|
}, [
|
|
Z(d.$slots, "trigger", { open: s(o) })
|
|
], 34)) : G("", !0),
|
|
me(tt, { name: e.animation }, {
|
|
default: ue(() => [
|
|
Oe(se("div", {
|
|
id: e.contentId,
|
|
class: P(s(y))
|
|
}, [
|
|
Z(d.$slots, "default")
|
|
], 10, An), [
|
|
[Ne, s(o)]
|
|
])
|
|
]),
|
|
_: 3
|
|
}, 8, ["name"]),
|
|
e.position === "bottom" ? (f(), $("div", {
|
|
key: 1,
|
|
class: P(s(c)),
|
|
role: "button",
|
|
tabindex: "0",
|
|
onClick: r,
|
|
onKeydown: he(r, ["enter"])
|
|
}, [
|
|
Z(d.$slots, "trigger", { open: s(o) })
|
|
], 34)) : G("", !0)
|
|
], 2));
|
|
}
|
|
}), Dn = {
|
|
install(e) {
|
|
Fe(e, wn);
|
|
}
|
|
}, xn = ["id", "autocomplete", "multiple", "size", "disabled"], $n = {
|
|
key: 0,
|
|
value: null,
|
|
disabled: "",
|
|
hidden: ""
|
|
}, Bn = ["value"], pt = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OSelect",
|
|
configField: "select",
|
|
inheritAttrs: !1,
|
|
__name: "Select",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** @model */
|
|
modelValue: {
|
|
type: [String, Number, Boolean, Object, Array],
|
|
default: null
|
|
},
|
|
/** Select options, unnecessary when default slot is used */
|
|
options: {
|
|
type: Array,
|
|
default: void 0
|
|
},
|
|
/**
|
|
* Vertical size of input
|
|
* @values small, medium, large
|
|
*/
|
|
size: {
|
|
type: String,
|
|
default: () => i("select.size")
|
|
},
|
|
/**
|
|
* Color of the control
|
|
* @values primary, info, success, warning, danger, and any other custom color
|
|
*/
|
|
variant: {
|
|
type: String,
|
|
default: () => i("select.variant")
|
|
},
|
|
/** Text when nothing is selected */
|
|
placeholder: { type: String, default: void 0 },
|
|
/** Allow multiple selection */
|
|
multiple: { type: Boolean, default: !1 },
|
|
/** Same as native disabled */
|
|
disabled: { type: Boolean, default: !1 },
|
|
/** Makes input full width when inside a grouped or addon field */
|
|
expanded: { type: Boolean, default: !1 },
|
|
/** Makes the element rounded */
|
|
rounded: { type: Boolean, default: !1 },
|
|
/** Same as native size */
|
|
nativeSize: { type: [String, Number], default: void 0 },
|
|
/**
|
|
* Icon pack to use
|
|
* @values mdi, fa, fas and any other custom icon pack
|
|
*/
|
|
iconPack: {
|
|
type: String,
|
|
default: () => i("select.iconPack", void 0)
|
|
},
|
|
/** Icon to be shown */
|
|
icon: {
|
|
type: String,
|
|
default: () => i("select.icon", void 0)
|
|
},
|
|
/** Makes the icon clickable */
|
|
iconClickable: { type: Boolean, default: !1 },
|
|
/** Icon to be added on the right side */
|
|
iconRight: {
|
|
type: String,
|
|
default: () => i("select.iconRight", void 0)
|
|
},
|
|
/** Make the icon right clickable */
|
|
iconRightClickable: { type: Boolean, default: !1 },
|
|
/** Variant of right icon */
|
|
iconRightVariant: { type: String, default: void 0 },
|
|
/** Same as native id. Also set the for label for o-field wrapper. */
|
|
id: { type: String, default: () => ot() },
|
|
/** Enable html 5 native validation */
|
|
useHtml5Validation: {
|
|
type: Boolean,
|
|
default: () => i("useHtml5Validation", !0)
|
|
},
|
|
/** The message which is shown when a validation error occurs */
|
|
validationMessage: { type: String, default: void 0 },
|
|
/** Same as native autocomplete options to use in HTML5 validation */
|
|
autocomplete: {
|
|
type: String,
|
|
default: () => i("select.autocomplete", "off")
|
|
},
|
|
/** Show status icon using field and variant prop */
|
|
statusIcon: {
|
|
type: Boolean,
|
|
default: () => i("statusIcon", !0)
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the native select element */
|
|
selectClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the left icon space inside the select */
|
|
iconLeftSpaceClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the right icon space inside the select */
|
|
iconRightSpaceClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of select when rounded */
|
|
roundedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the select when multiple mode is active */
|
|
multipleClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of select when expanded */
|
|
expandedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of select when disabled */
|
|
disabledClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the left icon */
|
|
iconLeftClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the right icon */
|
|
iconRightClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the select size */
|
|
sizeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the select variant */
|
|
variantClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the select placeholder */
|
|
placeholderClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the select arrow */
|
|
arrowClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the select variant for the root element*/
|
|
rootVariantClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
emits: ["update:modelValue", "focus", "blur", "invalid", "icon-click", "icon-right-click"],
|
|
setup(e, { expose: l, emit: a }) {
|
|
const t = e, o = a, r = z(), { checkHtml5Validity: u, onBlur: c, onFocus: y, onInvalid: d, setFocus: v } = rt(r, o, t), { parentField: m, statusVariant: k, statusVariantIcon: b } = qt(), F = Nt(t, o, { passive: !0 }), B = n(() => F.value === null);
|
|
it(() => {
|
|
fe(
|
|
() => F.value,
|
|
(D) => {
|
|
m != null && m.value && m.value.setFilled(!!D), u();
|
|
},
|
|
{ immediate: !0 }
|
|
);
|
|
});
|
|
const S = n(() => !t.options || !Array.isArray(t.options) ? [] : t.options.map(
|
|
(D) => typeof D == "string" ? { value: D, label: D, key: ot() } : { ...D, key: ot() }
|
|
)), C = n(
|
|
() => t.iconRight && !t.multiple || t.statusIcon && b.value
|
|
), p = n(
|
|
() => t.iconRight ? t.iconRight : b.value
|
|
), V = n(
|
|
() => t.iconRight ? t.iconRightVariant || t.variant || null : k.value
|
|
);
|
|
function T(D, M) {
|
|
o(D, M), xe(() => v());
|
|
}
|
|
function I(D) {
|
|
t.iconRightClickable && T("icon-right-click", D);
|
|
}
|
|
const E = h(
|
|
["rootClass", "o-ctrl-sel"],
|
|
[
|
|
"expandedClass",
|
|
"o-ctrl-sel--expanded",
|
|
null,
|
|
n(() => t.expanded)
|
|
],
|
|
[
|
|
"rootVariantClass",
|
|
"o-ctrl-sel--",
|
|
n(() => k.value || t.variant),
|
|
n(() => !!k.value || !!t.variant)
|
|
]
|
|
), K = h(
|
|
["selectClass", "o-sel"],
|
|
["roundedClass", "o-sel--rounded", null, n(() => t.rounded)],
|
|
["multipleClass", "o-sel--multiple", null, n(() => t.multiple)],
|
|
[
|
|
"sizeClass",
|
|
"o-sel--",
|
|
n(() => t.size),
|
|
n(() => !!t.size)
|
|
],
|
|
[
|
|
"variantClass",
|
|
"o-sel--",
|
|
n(() => k.value || t.variant),
|
|
n(() => !!k.value || !!t.variant)
|
|
],
|
|
["disabledClass", "o-sel--disabled", null, n(() => t.disabled)],
|
|
[
|
|
"iconLeftSpaceClass",
|
|
"o-sel-iconspace-left",
|
|
null,
|
|
n(() => !!t.icon)
|
|
],
|
|
[
|
|
"iconRightSpaceClass",
|
|
"o-sel-iconspace-right",
|
|
null,
|
|
n(() => !!t.iconRight)
|
|
],
|
|
["placeholderClass", "o-sel--placeholder", null, B],
|
|
[
|
|
"arrowClass",
|
|
"o-sel-arrow",
|
|
null,
|
|
n(() => !t.iconRight && !t.multiple)
|
|
]
|
|
), te = h(["iconLeftClass", "o-sel__icon-left"]), O = h(["iconRightClass", "o-sel__icon-right"]);
|
|
return l({ focus: v }), (D, M) => (f(), $("div", {
|
|
class: P(s(E)),
|
|
"data-oruga": "select"
|
|
}, [
|
|
e.icon ? (f(), ie(Te, {
|
|
key: 0,
|
|
class: P(s(te)),
|
|
clickable: e.iconClickable,
|
|
icon: e.icon,
|
|
pack: e.iconPack,
|
|
size: e.size,
|
|
onClick: M[0] || (M[0] = (Y) => T("icon-click", Y))
|
|
}, null, 8, ["class", "clickable", "icon", "pack", "size"])) : G("", !0),
|
|
Oe(se("select", ye(D.$attrs, {
|
|
id: e.id,
|
|
ref_key: "selectRef",
|
|
ref: r,
|
|
"onUpdate:modelValue": M[1] || (M[1] = (Y) => dt(F) ? F.value = Y : null),
|
|
"data-oruga-input": "select",
|
|
class: s(K),
|
|
autocomplete: e.autocomplete,
|
|
multiple: e.multiple,
|
|
size: e.nativeSize,
|
|
disabled: e.disabled,
|
|
onBlur: M[2] || (M[2] = //@ts-ignore
|
|
(...Y) => s(c) && s(c)(...Y)),
|
|
onFocus: M[3] || (M[3] = //@ts-ignore
|
|
(...Y) => s(y) && s(y)(...Y)),
|
|
onInvalid: M[4] || (M[4] = //@ts-ignore
|
|
(...Y) => s(d) && s(d)(...Y))
|
|
}), [
|
|
e.placeholder || D.$slots.placeholder ? (f(), $(ke, { key: 0 }, [
|
|
B.value ? (f(), $("option", $n, [
|
|
Z(D.$slots, "placeholder", {}, () => [
|
|
Ve(ce(e.placeholder), 1)
|
|
])
|
|
])) : G("", !0)
|
|
], 64)) : G("", !0),
|
|
Z(D.$slots, "default", {}, () => [
|
|
(f(!0), $(ke, null, $e(S.value, (Y) => (f(), $("option", ye({
|
|
key: Y.key,
|
|
value: Y.value
|
|
}, Y.attrs), ce(Y.label), 17, Bn))), 128))
|
|
])
|
|
], 16, xn), [
|
|
[Tl, s(F)]
|
|
]),
|
|
C.value ? (f(), ie(Te, {
|
|
key: 1,
|
|
class: P(s(O)),
|
|
clickable: e.iconRightClickable,
|
|
icon: p.value,
|
|
pack: e.iconPack,
|
|
size: e.size,
|
|
variant: V.value,
|
|
both: "",
|
|
onClick: I
|
|
}, null, 8, ["class", "clickable", "icon", "pack", "size", "variant"])) : G("", !0)
|
|
], 2));
|
|
}
|
|
}), On = ["data-oruga"], _a = /* @__PURE__ */ be({
|
|
name: "OPickerWrapper",
|
|
__name: "PickerWrapper",
|
|
props: /* @__PURE__ */ Be({
|
|
/** parent picker component props */
|
|
picker: { type: Object, required: !0 },
|
|
/** data-oruga attribute value */
|
|
dataOruga: { type: String, required: !0 },
|
|
/** the internal input value */
|
|
value: { type: [Date, Array], default: void 0 },
|
|
/** the active state of the dropdown */
|
|
active: { type: Boolean, default: !1 },
|
|
/** formatted display value to show when client is desktop */
|
|
formattedValue: { type: String, default: void 0 },
|
|
/** native value when client is mobile native */
|
|
nativeValue: { type: [String, Number], default: void 0 },
|
|
nativeType: { type: String, required: !0 },
|
|
nativeStep: { type: String, default: void 0 },
|
|
nativeMin: { type: [String, Number], default: void 0 },
|
|
nativeMax: { type: [String, Number], default: void 0 },
|
|
stayOpen: { type: Boolean, default: !1 },
|
|
rootClasses: {
|
|
type: Array,
|
|
required: !0
|
|
},
|
|
dropdownClasses: {
|
|
type: Array,
|
|
required: !0
|
|
},
|
|
boxClass: {
|
|
type: Array,
|
|
required: !0
|
|
}
|
|
}, {
|
|
active: { type: Boolean, default: !1 },
|
|
activeModifiers: {}
|
|
}),
|
|
emits: /* @__PURE__ */ Be(["update:active", "change", "native-change", "focus", "blur", "invalid", "icon-click", "icon-right-click"], ["update:active"]),
|
|
setup(e, { expose: l, emit: a }) {
|
|
const t = e, o = a, r = n(
|
|
() => !t.picker.inline && t.picker.mobileNative && ft.any()
|
|
), u = z(), c = z(), y = z(), d = n(
|
|
() => r.value ? y.value : c.value
|
|
), {
|
|
input: v,
|
|
checkHtml5Validity: m,
|
|
setFocus: k,
|
|
onBlur: b,
|
|
onFocus: F,
|
|
onInvalid: B,
|
|
isValid: S
|
|
} = rt(d, o, t.picker), C = !t.picker.placeholder || t.nativeValue ? t.nativeType : "text", p = n(
|
|
() => r.value ? t.nativeValue : t.formattedValue
|
|
), V = z(p.value);
|
|
fe(p, (R) => V.value = R), fe(
|
|
() => t.value,
|
|
() => {
|
|
V.value !== p.value && (V.value = p.value), !r.value && !t.stayOpen && te(!1), S.value || m();
|
|
},
|
|
{ flush: "post" }
|
|
);
|
|
const T = Ee(e, "active");
|
|
fe(T, D);
|
|
const I = n(() => t.picker.inline ? void 0 : "dialog"), E = n(() => t.picker.openOnFocus ? ["click"] : []);
|
|
Me && _e("keyup", K);
|
|
function K(R) {
|
|
T.value && (R.key === "Escape" || R.key === "Esc") && te(!1);
|
|
}
|
|
function te(R) {
|
|
u.value && (R || t.picker.closeOnClick) && xe(() => T.value = R);
|
|
}
|
|
function O(R) {
|
|
T.value && R.stopPropagation();
|
|
}
|
|
function D(R) {
|
|
R ? F() : R || b();
|
|
}
|
|
function M(R) {
|
|
r.value && v.value.type === "text" && (R.preventDefault(), R.stopPropagation(), v.value.blur(), setTimeout(() => {
|
|
v.value.readOnly = !1, v.value.type = t.nativeType, k();
|
|
}, 50));
|
|
}
|
|
function Y(R) {
|
|
r.value && (v.value.type === "text" ? (R.preventDefault(), R.stopPropagation()) : F());
|
|
}
|
|
function J() {
|
|
r.value && (v.value.value || (v.value.readOnly = !0, v.value.type = "text"), b());
|
|
}
|
|
function j(R) {
|
|
const _ = R.target.value ? R.target.value : null;
|
|
_ || (v.value.value = _, v.value.blur()), o("native-change", _);
|
|
}
|
|
const g = da(), w = n(() => ({
|
|
...g,
|
|
...t.picker.inputClasses
|
|
})), x = n(() => ({
|
|
"root-class": Xe(t.dropdownClasses),
|
|
...t.picker.dropdownClasses
|
|
}));
|
|
return l({ focus: k }), (R, _) => (f(), $("div", {
|
|
"data-oruga": e.dataOruga,
|
|
class: P(e.rootClasses),
|
|
onClick: M
|
|
}, [
|
|
r.value ? Z(R.$slots, "trigger", { key: 1 }, () => [
|
|
me(Ft, ye({
|
|
ref_key: "nativeInputRef",
|
|
ref: y
|
|
}, w.value, {
|
|
modelValue: V.value,
|
|
"onUpdate:modelValue": _[6] || (_[6] = (N) => V.value = N),
|
|
type: s(C),
|
|
min: e.nativeMin,
|
|
max: e.nativeMax,
|
|
step: e.nativeStep,
|
|
placeholder: e.picker.placeholder,
|
|
size: e.picker.size,
|
|
"icon-pack": e.picker.iconPack,
|
|
icon: e.picker.icon,
|
|
"icon-right": e.picker.iconRight,
|
|
"icon-right-clickable": e.picker.iconRightClickable,
|
|
rounded: e.picker.rounded,
|
|
disabled: e.picker.disabled,
|
|
readonly: s(C) == "text",
|
|
autocomplete: "off",
|
|
"use-html5-validation": !1,
|
|
onChange: j,
|
|
onFocus: Y,
|
|
onBlur: J,
|
|
onInvalid: s(B),
|
|
onIconClick: _[7] || (_[7] = (N) => R.$emit("icon-click", N)),
|
|
onIconRightClick: _[8] || (_[8] = (N) => R.$emit("icon-right-click", N))
|
|
}), null, 16, ["modelValue", "type", "min", "max", "step", "placeholder", "size", "icon-pack", "icon", "icon-right", "icon-right-clickable", "rounded", "disabled", "readonly", "onInvalid"])
|
|
]) : (f(), ie(va, ye({
|
|
key: 0,
|
|
ref_key: "dropdownRef",
|
|
ref: u
|
|
}, x.value, {
|
|
active: T.value,
|
|
"onUpdate:active": _[5] || (_[5] = (N) => T.value = N),
|
|
position: e.picker.position,
|
|
disabled: e.picker.disabled,
|
|
inline: e.picker.inline,
|
|
"mobile-modal": e.picker.mobileModal,
|
|
"trap-focus": e.picker.trapFocus,
|
|
"aria-role": I.value,
|
|
"aria-modal": !e.picker.inline,
|
|
tabindex: -1,
|
|
teleport: e.picker.teleport,
|
|
triggers: E.value
|
|
}), It({
|
|
default: ue(() => [
|
|
me(Ct, {
|
|
override: "",
|
|
tag: "div",
|
|
"item-class": e.boxClass,
|
|
disabled: e.picker.disabled,
|
|
clickable: !1
|
|
}, {
|
|
default: ue(() => [
|
|
Z(R.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 8, ["item-class", "disabled"])
|
|
]),
|
|
_: 2
|
|
}, [
|
|
e.picker.inline ? void 0 : {
|
|
name: "trigger",
|
|
fn: ue(() => [
|
|
Z(R.$slots, "trigger", {}, () => [
|
|
me(Ft, ye({
|
|
ref_key: "inputRef",
|
|
ref: c
|
|
}, w.value, {
|
|
modelValue: V.value,
|
|
"onUpdate:modelValue": _[0] || (_[0] = (N) => V.value = N),
|
|
autocomplete: "off",
|
|
placeholder: e.picker.placeholder,
|
|
size: e.picker.size,
|
|
"icon-pack": e.picker.iconPack,
|
|
icon: e.picker.icon,
|
|
"icon-right": e.picker.iconRight,
|
|
"icon-right-clickable": e.picker.iconRightClickable,
|
|
expanded: e.picker.expanded,
|
|
rounded: e.picker.rounded,
|
|
disabled: e.picker.disabled,
|
|
readonly: e.picker.readonly,
|
|
"use-html5-validation": !1,
|
|
onClick: O,
|
|
onKeyup: _[1] || (_[1] = he((N) => te(!0), ["enter"])),
|
|
onChange: _[2] || (_[2] = (N) => R.$emit("change", N.target.value)),
|
|
onFocus: s(F),
|
|
onBlur: s(b),
|
|
onIconClick: _[3] || (_[3] = (N) => R.$emit("icon-click", N)),
|
|
onIconRightClick: _[4] || (_[4] = (N) => R.$emit("icon-right-click", N))
|
|
}), null, 16, ["modelValue", "placeholder", "size", "icon-pack", "icon", "icon-right", "icon-right-clickable", "expanded", "rounded", "disabled", "readonly", "onFocus", "onBlur"])
|
|
])
|
|
]),
|
|
key: "0"
|
|
}
|
|
]), 1040, ["active", "position", "disabled", "inline", "mobile-modal", "trap-focus", "aria-role", "aria-modal", "teleport", "triggers"]))
|
|
], 10, On));
|
|
}
|
|
});
|
|
function Pn(e = void 0, l = "long") {
|
|
const a = [];
|
|
for (let o = 0; o < 12; o++)
|
|
a.push(new Date(2e3, o, 15));
|
|
const t = new Intl.DateTimeFormat(e, {
|
|
month: l
|
|
// timeZone: 'UTC'
|
|
});
|
|
return a.map((o) => t.format(o));
|
|
}
|
|
function Mn(e = void 0, l = 0, a = "narrow") {
|
|
const t = [];
|
|
for (let r = 1, u = 0; u < 7; r++) {
|
|
const c = new Date(2e3, 0, r);
|
|
(c.getDay() === l || u > 0) && (t.push(c), u++);
|
|
}
|
|
const o = new Intl.DateTimeFormat(e, {
|
|
weekday: a
|
|
// timeZone: 'UTC'
|
|
});
|
|
return t.map((r) => o.format(r));
|
|
}
|
|
function pa(e, l) {
|
|
const a = l.match(e);
|
|
return e.toString().match(/<(.+?)>/g).map((t) => {
|
|
const o = t.match(/<(.+)>/);
|
|
return !o || o.length <= 0 ? null : t.match(/<(.+)>/)[1];
|
|
}).reduce((t, o, r) => (a && a.length > r ? t[o] = a[r + 1] : t[o] = null, t), {});
|
|
}
|
|
function Vn(e, l, a, t) {
|
|
const o = new Date(a, l), r = [], u = new Date(a, l, e).getDay(), c = u >= t ? u - t : 7 - t + u;
|
|
let y = 1;
|
|
for (let v = 0; v < c; v++)
|
|
r.unshift(
|
|
new Date(
|
|
o.getFullYear(),
|
|
o.getMonth(),
|
|
e - y
|
|
)
|
|
), y++;
|
|
r.push(new Date(a, l, e));
|
|
let d = 1;
|
|
for (; r.length < 7; )
|
|
r.push(new Date(a, l, e + d)), d++;
|
|
return r;
|
|
}
|
|
function ra(e, l, a) {
|
|
const t = 7 + l - a;
|
|
return -((7 + new Date(e, 0, t).getDay() - l) % 7) + t - 1;
|
|
}
|
|
function Tn(e) {
|
|
return e % 4 === 0 && e % 100 !== 0 || e % 400 === 0 ? 366 : 365;
|
|
}
|
|
function ta(e, l, a) {
|
|
const t = ra(e, l, a), o = ra(e + 1, l, a);
|
|
return (Tn(e) - t + o) / 7;
|
|
}
|
|
function ma(e) {
|
|
function l(d, v) {
|
|
const m = [];
|
|
if (e.minDate && m.push(d >= e.minDate), e.maxDate && m.push(d <= e.maxDate), e.nearbyMonthDays && !e.nearbySelectableMonthDays && m.push(d.getMonth() === v), e.selectableDates)
|
|
if (typeof e.selectableDates == "function") {
|
|
if (e.selectableDates(d))
|
|
return !0;
|
|
m.push(!1);
|
|
} else
|
|
for (let k = 0; k < e.selectableDates.length; k++) {
|
|
const b = e.selectableDates[k];
|
|
if (d.getDate() === b.getDate() && d.getFullYear() === b.getFullYear() && d.getMonth() === b.getMonth())
|
|
return !0;
|
|
m.push(!1);
|
|
}
|
|
if (e.unselectableDates)
|
|
if (typeof e.unselectableDates == "function")
|
|
m.push(!e.unselectableDates(d));
|
|
else
|
|
for (let k = 0; k < e.unselectableDates.length; k++) {
|
|
const b = e.unselectableDates[k];
|
|
m.push(
|
|
d.getDate() !== b.getDate() || d.getFullYear() !== b.getFullYear() || d.getMonth() !== b.getMonth()
|
|
);
|
|
}
|
|
if (e.unselectableDaysOfWeek)
|
|
for (let k = 0; k < e.unselectableDaysOfWeek.length; k++) {
|
|
const b = e.unselectableDaysOfWeek[k];
|
|
m.push(d.getDay() !== b);
|
|
}
|
|
return m.indexOf(!1) < 0;
|
|
}
|
|
const a = n(() => e.type === "month"), t = n(
|
|
() => new Intl.DateTimeFormat(e.locale, {
|
|
year: "numeric",
|
|
month: "numeric"
|
|
}).resolvedOptions()
|
|
), o = n(
|
|
() => new Intl.DateTimeFormat(
|
|
e.locale
|
|
/*, { timeZone: 'UTC' }*/
|
|
)
|
|
), r = n(
|
|
() => new Intl.DateTimeFormat(e.locale, {
|
|
year: t.value.year || "numeric",
|
|
month: t.value.month || "2-digit"
|
|
// timeZone: 'UTC'
|
|
})
|
|
), u = n(() => {
|
|
const d = e.dateCreator();
|
|
return d.setHours(10), d.setSeconds(0), d.setMinutes(0), d.setMilliseconds(0), d;
|
|
});
|
|
return { isDateSelectable: l, defaultDateParser: (d) => {
|
|
if (!d)
|
|
return null;
|
|
const m = (e.multiple ? d.split(", ") : [d]).map((k) => {
|
|
if (o.value.formatToParts && typeof o.value.formatToParts == "function") {
|
|
const S = (a.value ? r.value : o.value).formatToParts(u.value).map((p) => p.type === "literal" ? p.value : `((?!=<${p.type}>)\\d+)`).join(""), C = pa(S, k);
|
|
if (C.year && C.year.length === 4 && C.month && C.month <= 12) {
|
|
if (a.value)
|
|
return new Date(C.year, C.month - 1);
|
|
if (C.day && C.day <= 31)
|
|
return new Date(
|
|
C.year,
|
|
C.month - 1,
|
|
C.day,
|
|
12
|
|
);
|
|
}
|
|
}
|
|
if (!a.value)
|
|
return new Date(Date.parse(k));
|
|
const b = k.split("/"), F = b[0].length === 4 ? b[0] : b[1], B = b[0].length === 2 ? b[0] : b[1];
|
|
if (F && B)
|
|
return new Date(
|
|
parseInt(F, 10),
|
|
parseInt(B, 10) - 1,
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
0
|
|
);
|
|
});
|
|
return e.multiple ? m : m[0];
|
|
}, defaultDateFormatter: (d) => {
|
|
if (!d)
|
|
return "";
|
|
const v = Array.isArray(d) ? d : [d];
|
|
if (!v.length)
|
|
return "";
|
|
const m = v.map((k) => {
|
|
const b = new Date(
|
|
k.getFullYear(),
|
|
k.getMonth(),
|
|
k.getDate(),
|
|
12
|
|
);
|
|
return a.value ? r.value.format(b) : o.value.format(b);
|
|
});
|
|
return e.multiple ? m.join(", ") : m.join(" - ");
|
|
} };
|
|
}
|
|
const Rn = ["tabindex"], In = ["tabindex", "onClick", "onMouseenter", "onFocus", "onKeydown"], zn = /* @__PURE__ */ be({
|
|
name: "ODatepickerTableRow",
|
|
configField: "datepicker",
|
|
__name: "DatepickerTableRow",
|
|
props: {
|
|
day: { type: Number, required: !0 },
|
|
week: { type: Array, required: !0 },
|
|
month: { type: Number, required: !0 },
|
|
selectedDate: {
|
|
type: [Date, Array],
|
|
default: void 0
|
|
},
|
|
events: { type: Array, default: void 0 },
|
|
hoveredDateRange: { type: Array, default: () => [] },
|
|
pickerProps: {
|
|
type: Object,
|
|
required: !0
|
|
}
|
|
},
|
|
emits: ["select", "hover-enddate", "change-focus", "week-number-click"],
|
|
setup(e, { emit: l }) {
|
|
const a = e, t = l, { isDateSelectable: o } = ma(a.pickerProps), r = n(() => a.pickerProps), u = n(() => {
|
|
var O;
|
|
return !!((O = a.events) != null && O.length);
|
|
}), c = z(/* @__PURE__ */ new Map());
|
|
function y(O, D) {
|
|
const M = `day-${O.getMonth()}-${O.getDate()}`;
|
|
D && c.value.set(M, D);
|
|
}
|
|
fe(
|
|
() => a.day,
|
|
(O) => {
|
|
a.week.map((D) => D.getDate()).includes(O) && xe(() => {
|
|
const D = `day-${a.month}-${O}`, M = c.value.get(D);
|
|
M && M.focus();
|
|
});
|
|
}
|
|
), fe(
|
|
() => a.month,
|
|
// clear day refs on month change
|
|
() => c.value = /* @__PURE__ */ new Map()
|
|
);
|
|
function d(O) {
|
|
r.value.weekNumberClickable && t("week-number-click", O);
|
|
}
|
|
function v(O) {
|
|
return Math.round(
|
|
(O.getTime() - new Date(O.getFullYear(), 0, 1).getTime()) / 864e5
|
|
) + 1;
|
|
}
|
|
function m(O) {
|
|
const D = r.value.firstDayOfWeek, M = r.value.rulesForFirstWeek, Y = ra(O.getFullYear(), D, M), J = Math.floor((v(O) - Y - 1) / 7) + 1;
|
|
let j, g;
|
|
return J < 1 ? (g = O.getFullYear() - 1, j = J + ta(g, D, M)) : J > ta(O.getFullYear(), D, M) ? (j = J - ta(O.getFullYear(), D, M), g = O.getFullYear() + 1) : (g = O.getFullYear(), j = J), j;
|
|
}
|
|
function k(O) {
|
|
var D;
|
|
return (D = a.events) != null && D.length ? a.events.filter((M) => M.date.getDay() === O.getDay()) : [];
|
|
}
|
|
function b(O, D) {
|
|
let M = !0;
|
|
switch (O.key) {
|
|
case "Tab": {
|
|
M = !1;
|
|
break;
|
|
}
|
|
case " ":
|
|
case "Space":
|
|
case "Spacebar":
|
|
case "Enter": {
|
|
F(D);
|
|
break;
|
|
}
|
|
case "ArrowLeft":
|
|
case "Left": {
|
|
B(D, -1);
|
|
break;
|
|
}
|
|
case "ArrowRight":
|
|
case "Right": {
|
|
B(D, 1);
|
|
break;
|
|
}
|
|
case "ArrowUp":
|
|
case "Up": {
|
|
B(D, -7);
|
|
break;
|
|
}
|
|
case "ArrowDown":
|
|
case "Down": {
|
|
B(D, 7);
|
|
break;
|
|
}
|
|
}
|
|
M && O.preventDefault();
|
|
}
|
|
function F(O) {
|
|
r.value.disabled || r.value.readonly || o(O, a.month) && t("select", O);
|
|
}
|
|
function B(O, D) {
|
|
const M = new Date(O.getTime());
|
|
for (M.setDate(O.getDate() + D); r.value.minDate && M < r.value.minDate || r.value.maxDate && M > r.value.maxDate || !o(M, M.getMonth()); )
|
|
M.setDate(M.getDate() - Math.sign(D));
|
|
S(M), t("change-focus", M);
|
|
}
|
|
function S(O) {
|
|
r.value.range && t("hover-enddate", O);
|
|
}
|
|
function C(O, D, M = !1) {
|
|
return !O || !D || M ? !1 : Array.isArray(D) ? D.some(
|
|
(Y) => O.getDate() === Y.getDate() && O.getFullYear() === Y.getFullYear() && O.getMonth() === Y.getMonth()
|
|
) : O.getDate() === D.getDate() && O.getFullYear() === D.getFullYear() && O.getMonth() === D.getMonth();
|
|
}
|
|
function p(O, D, M = !1) {
|
|
return !Array.isArray(D) || M ? !1 : O > D[0] && O < D[1];
|
|
}
|
|
function V(O) {
|
|
const D = h(
|
|
[
|
|
"tableCellSelectedClass",
|
|
"o-dpck__table__cell--selected",
|
|
null,
|
|
C(O, a.selectedDate) || p(O, a.selectedDate, r.value.multiple)
|
|
],
|
|
[
|
|
"tableCellFirstSelectedClass",
|
|
"o-dpck__table__cell--first-selected",
|
|
null,
|
|
C(
|
|
O,
|
|
Array.isArray(a.selectedDate) && a.selectedDate[0],
|
|
r.value.multiple
|
|
)
|
|
],
|
|
[
|
|
"tableCellWithinSelectedClass",
|
|
"o-dpck__table__cell--within-selected",
|
|
null,
|
|
p(O, a.selectedDate, r.value.multiple)
|
|
],
|
|
[
|
|
"tableCellLastSelectedClass",
|
|
"o-dpck__table__cell--last-selected",
|
|
null,
|
|
C(
|
|
O,
|
|
Array.isArray(a.selectedDate) && a.selectedDate[1],
|
|
r.value.multiple
|
|
)
|
|
],
|
|
[
|
|
"tableCellFirstHoveredClass",
|
|
"o-dpck__table__cell--first-hovered",
|
|
null,
|
|
C(
|
|
O,
|
|
Array.isArray(a.hoveredDateRange) && a.hoveredDateRange[0]
|
|
)
|
|
],
|
|
[
|
|
"tableCellWithinHoveredClass",
|
|
"o-dpck__table__cell--within-hovered",
|
|
null,
|
|
p(O, a.hoveredDateRange)
|
|
],
|
|
[
|
|
"tableCellLastHoveredClass",
|
|
"o-dpck__table__cell--last-hovered",
|
|
null,
|
|
C(
|
|
O,
|
|
Array.isArray(a.hoveredDateRange) && a.hoveredDateRange[1]
|
|
)
|
|
],
|
|
[
|
|
"tableCellTodayClass",
|
|
"o-dpck__table__cell--today",
|
|
null,
|
|
C(O, r.value.dateCreator())
|
|
],
|
|
[
|
|
"tableCellSelectableClass",
|
|
"o-dpck__table__cell--selectable",
|
|
null,
|
|
o(O, a.month) && !r.value.disabled && !r.value.readonly
|
|
],
|
|
[
|
|
"tableCellUnselectableClass",
|
|
"o-dpck__table__cell--unselectable",
|
|
null,
|
|
!o(O, a.month) || r.value.disabled
|
|
],
|
|
[
|
|
"tableCellInvisibleClass",
|
|
"o-dpck__table__cell--invisible",
|
|
null,
|
|
!r.value.nearbyMonthDays && O.getMonth() !== a.month
|
|
],
|
|
[
|
|
"tableCellNearbyClass",
|
|
"o-dpck__table__cell--nearby",
|
|
null,
|
|
r.value.nearbySelectableMonthDays && O.getMonth() !== a.month
|
|
],
|
|
[
|
|
"tableCellTodayClass",
|
|
"o-dpck__table__cell--today",
|
|
null,
|
|
C(O, r.value.dateCreator())
|
|
]
|
|
);
|
|
return [
|
|
...E.value,
|
|
...te.value,
|
|
...D.value
|
|
];
|
|
}
|
|
function T(O) {
|
|
return h(
|
|
["tableEventClass", "o-dpck__table__event"],
|
|
[
|
|
"tableEventVariantClass",
|
|
"o-dpck__table__event--",
|
|
O.type,
|
|
!!O.type
|
|
],
|
|
[
|
|
"tableEventIndicatorsClass",
|
|
"o-dpck__table__event--",
|
|
r.value.indicators,
|
|
!!r.value.indicators
|
|
]
|
|
).value;
|
|
}
|
|
const I = h(["tableRowClass", "o-dpck__table__row"]), E = h([
|
|
"tableCellClass",
|
|
"o-dpck__table__cell"
|
|
]), K = h([
|
|
"tableEventsClass",
|
|
"o-dpck__table__events"
|
|
]), te = h([
|
|
"tableCellEventsClass",
|
|
"o-dpck__table__cell--events",
|
|
null,
|
|
u
|
|
]);
|
|
return (O, D) => (f(), $("div", {
|
|
class: P(s(I))
|
|
}, [
|
|
r.value.showWeekNumber ? (f(), $("div", {
|
|
key: 0,
|
|
class: P(s(E)),
|
|
style: et({
|
|
cursor: r.value.weekNumberClickable ? "pointer" : "auto"
|
|
}),
|
|
tabindex: r.value.weekNumberClickable ? 0 : null,
|
|
role: "button",
|
|
onClick: D[0] || (D[0] = ve((M) => d(m(e.week[6])), ["prevent"])),
|
|
onKeydown: D[1] || (D[1] = he(ve((M) => d(m(e.week[6])), ["prevent"]), ["enter"]))
|
|
}, [
|
|
se("span", null, ce(m(e.week[6])), 1)
|
|
], 46, Rn)) : G("", !0),
|
|
(f(!0), $(ke, null, $e(e.week, (M, Y) => (f(), $(ke, { key: Y }, [
|
|
!r.value.disabled && !r.value.readonly && s(o)(M, e.month) ? (f(), $("div", {
|
|
key: 0,
|
|
ref_for: !0,
|
|
ref: (J) => y(M, J),
|
|
class: P(V(M)),
|
|
role: "button",
|
|
tabindex: e.day === M.getDate() && e.month === M.getMonth() ? null : 0,
|
|
onClick: ve((J) => F(M), ["prevent"]),
|
|
onMouseenter: (J) => S(M),
|
|
onFocus: (J) => S(M),
|
|
onKeydown: he(ve((J) => b(J, M), ["prevent"]), ["enter"])
|
|
}, [
|
|
se("span", null, ce(M.getDate()), 1),
|
|
k(M).length ? (f(), $("div", {
|
|
key: 0,
|
|
class: P(s(K))
|
|
}, [
|
|
(f(!0), $(ke, null, $e(k(M), (J, j) => (f(), $("div", {
|
|
key: j,
|
|
class: P(T(J))
|
|
}, null, 2))), 128))
|
|
], 2)) : G("", !0)
|
|
], 42, In)) : (f(), $("div", {
|
|
key: 1,
|
|
class: P(V(M))
|
|
}, [
|
|
se("span", null, ce(M.getDate()), 1)
|
|
], 2))
|
|
], 64))), 128))
|
|
], 2));
|
|
}
|
|
}), Hn = /* @__PURE__ */ be({
|
|
name: "ODatepickerTable",
|
|
configField: "datepicker",
|
|
__name: "DatepickerTable",
|
|
props: /* @__PURE__ */ Be({
|
|
modelValue: {
|
|
type: [Date, Array],
|
|
default: void 0
|
|
},
|
|
focusedDate: { type: Object, required: !0 },
|
|
dayNames: { type: Array, required: !0 },
|
|
monthNames: { type: Array, required: !0 },
|
|
pickerProps: {
|
|
type: Object,
|
|
required: !0
|
|
}
|
|
}, {
|
|
focusedDate: {},
|
|
focusedDateModifiers: {}
|
|
}),
|
|
emits: /* @__PURE__ */ Be(["update:modelValue", "update:focusedDate", "range-start", "range-end", "week-number-click"], ["update:focusedDate"]),
|
|
setup(e, { emit: l }) {
|
|
const a = e, t = l, { isDateSelectable: o } = ma(a.pickerProps), r = Ee(e, "focusedDate"), u = z(), c = z(), y = z(), d = n(() => a.pickerProps), v = n(() => {
|
|
const D = [];
|
|
let M = d.value.firstDayOfWeek;
|
|
for (; D.length < a.dayNames.length; ) {
|
|
const Y = a.dayNames[M % a.dayNames.length];
|
|
D.push(Y), M++;
|
|
}
|
|
return d.value.showWeekNumber && D.unshift(""), D;
|
|
}), m = n(() => d.value.events ? d.value.events.map(
|
|
(D) => !D.date && D instanceof Date ? { date: D } : D
|
|
).filter(
|
|
(D) => D.date.getMonth() === r.value.month && D.date.getFullYear() === r.value.year
|
|
) : []), k = n(() => {
|
|
B();
|
|
const D = r.value.month, M = r.value.year, Y = [];
|
|
let J = 1;
|
|
for (; Y.length < 6; ) {
|
|
const j = Vn(
|
|
J,
|
|
D,
|
|
M,
|
|
d.value.firstDayOfWeek
|
|
);
|
|
Y.push(j), J += 7;
|
|
}
|
|
return Y;
|
|
});
|
|
function b(D) {
|
|
return d.value.events ? m.value.filter((M) => {
|
|
const Y = new Date(M.date);
|
|
Y.setHours(0, 0, 0, 0);
|
|
const J = Y.getTime();
|
|
return D.some((j) => j.getTime() === J);
|
|
}) : [];
|
|
}
|
|
const F = n(() => !d.value.range || c.value ? [] : (y.value < u.value ? [y.value, u.value] : [u.value, y.value]).filter(nt));
|
|
function B() {
|
|
const D = new Date(
|
|
r.value.year,
|
|
r.value.month,
|
|
r.value.day
|
|
);
|
|
if (o(D, r.value.month))
|
|
return;
|
|
let M = 0;
|
|
const Y = new Date(
|
|
r.value.year,
|
|
r.value.month + 1,
|
|
0
|
|
).getDate();
|
|
let J = null;
|
|
for (; !J && ++M < Y; ) {
|
|
const j = new Date(
|
|
r.value.year,
|
|
r.value.month,
|
|
M
|
|
);
|
|
o(j, r.value.month) && (J = D, r.value = {
|
|
day: j.getDate(),
|
|
month: j.getMonth(),
|
|
year: j.getFullYear()
|
|
});
|
|
}
|
|
}
|
|
function S(D) {
|
|
d.value.disabled || (!d.value.range && !d.value.multiple ? t("update:modelValue", D) : d.value.range ? C(D) : d.value.multiple && p(D));
|
|
}
|
|
function C(D) {
|
|
u.value && c.value ? (u.value = D, c.value = void 0, t("range-start", D)) : u.value && !c.value ? (u.value > D ? (c.value = u.value, u.value = D) : c.value = D, t("range-end", D), t("update:modelValue", [
|
|
u.value,
|
|
c.value
|
|
])) : (u.value = D, t("range-start", D));
|
|
}
|
|
function p(D) {
|
|
if (!Array.isArray(a.modelValue))
|
|
return;
|
|
let M = a.modelValue;
|
|
M.filter(
|
|
(J) => J.getDate() === D.getDate() && J.getFullYear() === D.getFullYear() && J.getMonth() === D.getMonth()
|
|
).length ? M = M.filter(
|
|
(J) => J.getDate() !== D.getDate() || J.getFullYear() !== D.getFullYear() || J.getMonth() !== D.getMonth()
|
|
) : M = [...M, D], t("update:modelValue", M);
|
|
}
|
|
function V(D) {
|
|
y.value = D;
|
|
}
|
|
function T(D) {
|
|
r.value = {
|
|
day: D.getDate(),
|
|
month: D.getMonth(),
|
|
year: D.getFullYear()
|
|
};
|
|
}
|
|
const I = h(["tableClass", "o-dpck__table"]), E = h([
|
|
"tableHeadClass",
|
|
"o-dpck__table__head"
|
|
]), K = h([
|
|
"tableCellClass",
|
|
"o-dpck__table__cell"
|
|
]), te = h([
|
|
"tableHeadCellClass",
|
|
"o-dpck__table__head-cell"
|
|
]), O = h([
|
|
"tableBodyClass",
|
|
"o-dpck__table__body"
|
|
]);
|
|
return (D, M) => (f(), $("section", {
|
|
class: P(s(I))
|
|
}, [
|
|
se("header", {
|
|
class: P(s(E))
|
|
}, [
|
|
(f(!0), $(ke, null, $e(v.value, (Y, J) => (f(), $("div", {
|
|
key: J,
|
|
class: P([...s(K), ...s(te)])
|
|
}, [
|
|
se("span", null, ce(Y), 1)
|
|
], 2))), 128))
|
|
], 2),
|
|
se("div", {
|
|
class: P(s(O))
|
|
}, [
|
|
(f(!0), $(ke, null, $e(k.value, (Y, J) => (f(), ie(zn, {
|
|
key: J,
|
|
"selected-date": e.modelValue,
|
|
day: r.value.day,
|
|
week: Y,
|
|
month: r.value.month,
|
|
events: b(Y),
|
|
"hovered-date-range": F.value,
|
|
"picker-props": a.pickerProps,
|
|
onSelect: S,
|
|
onHoverEnddate: V,
|
|
onChangeFocus: T,
|
|
onWeekNumberClick: M[0] || (M[0] = (j) => D.$emit("week-number-click", j))
|
|
}, null, 8, ["selected-date", "day", "week", "month", "events", "hovered-date-range", "picker-props"]))), 128))
|
|
], 2)
|
|
], 2));
|
|
}
|
|
}), Nn = ["tabindex", "onClick", "onMouseenter", "onFocus", "onKeydown"], Ln = {
|
|
key: 0,
|
|
class: "events"
|
|
}, En = /* @__PURE__ */ be({
|
|
name: "ODatepickerMonth",
|
|
configField: "datepicker",
|
|
inheritAttrs: !1,
|
|
__name: "DatepickerMonth",
|
|
props: {
|
|
modelValue: {
|
|
type: [Date, Array],
|
|
default: void 0
|
|
},
|
|
monthNames: { type: Array, required: !0 },
|
|
focusedDate: { type: Object, required: !0 },
|
|
pickerProps: {
|
|
type: Object,
|
|
required: !0
|
|
}
|
|
},
|
|
emits: ["update:modelValue", "update:focusedDate", "range-start", "range-end"],
|
|
setup(e, { emit: l }) {
|
|
const a = e, t = l, o = z(), r = z(), u = z(), c = n(() => a.pickerProps), y = n(() => {
|
|
var g;
|
|
return !!((g = c.value.events) != null && g.length);
|
|
}), d = z(/* @__PURE__ */ new Map());
|
|
function v(g, w) {
|
|
const x = `month-${g.getMonth()}`;
|
|
w && d.value.set(x, w);
|
|
}
|
|
fe(
|
|
() => a.focusedDate.month,
|
|
(g) => {
|
|
const w = `month-${g}`;
|
|
xe(() => {
|
|
const x = d.value.get(w);
|
|
(x == null ? void 0 : x.length) > 0 && x[0] && x[0].focus();
|
|
});
|
|
}
|
|
);
|
|
const m = n(() => c.value.events ? c.value.events.map((g) => (!g.date && g instanceof Date && (g = { date: g }), g.type || (g.type = "is-primary"), g)).filter((g) => g.date.getFullYear() === a.focusedDate.year) : []), k = n(() => {
|
|
const g = a.focusedDate.year, w = [];
|
|
for (let x = 0; x < 12; x++) {
|
|
const R = new Date(g, x, 1);
|
|
R.setHours(0, 0, 0, 0), w.push(R);
|
|
}
|
|
return w;
|
|
}), b = n(() => !c.value.range || !r.value ? [] : (u.value < o.value ? [u.value, o.value] : [o.value, u.value]).filter(nt));
|
|
function F(g) {
|
|
return m.value.length ? m.value.filter(
|
|
(w) => w.date.getMonth() === g.getMonth()
|
|
) : [];
|
|
}
|
|
function B(g) {
|
|
const w = [];
|
|
if (c.value.minDate && w.push(g >= c.value.minDate), c.value.maxDate && w.push(g <= c.value.maxDate), w.push(g.getFullYear() === a.focusedDate.year), c.value.selectableDates)
|
|
if (typeof c.value.selectableDates == "function") {
|
|
if (c.value.selectableDates(g))
|
|
return !0;
|
|
w.push(!1);
|
|
} else
|
|
for (let x = 0; x < c.value.selectableDates.length; x++) {
|
|
const R = c.value.selectableDates[x];
|
|
if (g.getFullYear() === R.getFullYear() && g.getMonth() === R.getMonth())
|
|
return !0;
|
|
w.push(!1);
|
|
}
|
|
if (c.value.unselectableDates)
|
|
if (typeof c.value.unselectableDates == "function")
|
|
w.push(!c.value.unselectableDates(g));
|
|
else
|
|
for (let x = 0; x < c.value.unselectableDates.length; x++) {
|
|
const R = c.value.unselectableDates[x];
|
|
w.push(
|
|
g.getFullYear() !== R.getFullYear() || g.getMonth() !== R.getMonth()
|
|
);
|
|
}
|
|
if (c.value.unselectableDaysOfWeek)
|
|
for (let x = 0; x < c.value.unselectableDaysOfWeek.length; x++) {
|
|
const R = c.value.unselectableDaysOfWeek[x];
|
|
w.push(g.getDay() !== R);
|
|
}
|
|
return w.indexOf(!1) < 0;
|
|
}
|
|
function S(g, w) {
|
|
let x = !0;
|
|
switch (g.key) {
|
|
case "Tab": {
|
|
x = !1;
|
|
break;
|
|
}
|
|
case " ":
|
|
case "Space":
|
|
case "Spacebar":
|
|
case "Enter": {
|
|
C(w);
|
|
break;
|
|
}
|
|
case "ArrowLeft":
|
|
case "Left": {
|
|
I(w, -1);
|
|
break;
|
|
}
|
|
case "ArrowRight":
|
|
case "Right": {
|
|
I(w, 1);
|
|
break;
|
|
}
|
|
case "ArrowUp":
|
|
case "Up": {
|
|
I(w, -7);
|
|
break;
|
|
}
|
|
case "ArrowDown":
|
|
case "Down": {
|
|
I(w, 7);
|
|
break;
|
|
}
|
|
}
|
|
x && g.preventDefault();
|
|
}
|
|
function C(g) {
|
|
c.value.disabled || c.value.readonly || (!c.value.range && !c.value.multiple && B(g) ? t("update:modelValue", g) : c.value.range ? p(g) : c.value.multiple && T(g));
|
|
}
|
|
function p(g) {
|
|
o.value && r.value ? (o.value = g, r.value = void 0, t("range-start", g)) : o.value && !r.value ? (o.value > g ? (r.value = o.value, o.value = g) : r.value = g, t("range-end", g), t("update:modelValue", [
|
|
o.value,
|
|
r.value
|
|
])) : (o.value = g, t("range-start", g));
|
|
}
|
|
const V = n(
|
|
() => c.value.multiple && a.modelValue ? a.modelValue : []
|
|
);
|
|
function T(g) {
|
|
if (!Array.isArray(a.modelValue))
|
|
return;
|
|
let w = a.modelValue;
|
|
w.filter(
|
|
(R) => R.getDate() === g.getDate() && R.getFullYear() === g.getFullYear() && R.getMonth() === g.getMonth()
|
|
).length ? w = w.filter(
|
|
(R) => R.getDate() !== g.getDate() || R.getFullYear() !== g.getFullYear() || R.getMonth() !== g.getMonth()
|
|
) : w.push(g), t("update:modelValue", w);
|
|
}
|
|
function I(g, w) {
|
|
g.setMonth(g.getMonth() + w);
|
|
const x = {
|
|
day: g.getDate(),
|
|
month: g.getMonth(),
|
|
year: g.getFullYear()
|
|
};
|
|
t("update:focusedDate", x);
|
|
}
|
|
function E(g) {
|
|
c.value.range && (u.value = g);
|
|
}
|
|
function K(g, w, x = !1) {
|
|
return !g || !w || x ? !1 : Array.isArray(w) ? w.some(
|
|
(R) => g.getFullYear() === R.getFullYear() && g.getMonth() === R.getMonth()
|
|
) : g.getFullYear() === w.getFullYear() && g.getMonth() === w.getMonth();
|
|
}
|
|
function te(g, w, x = !1) {
|
|
return !Array.isArray(w) || x ? !1 : g > w[0] && g < w[1];
|
|
}
|
|
function O(g, w, x = !1) {
|
|
return !Array.isArray(w) || !x ? !1 : w.some(
|
|
(R) => g.getDate() === R.getDate() && g.getFullYear() === R.getFullYear() && g.getMonth() === R.getMonth()
|
|
);
|
|
}
|
|
const D = h(["monthClass", "o-dpck__month"]), M = h([
|
|
"monthBodyClass",
|
|
"o-dpck__month__body"
|
|
]), Y = h([
|
|
"monthTableClass",
|
|
"o-dpck__month__table"
|
|
]), J = h(
|
|
["monthCellClass", "o-dpck__month__cell"],
|
|
["monthCellEventsClass", "o-dpck__month__cell--events", null, y]
|
|
);
|
|
function j(g) {
|
|
const w = h(
|
|
[
|
|
"monthCellSelectedClass",
|
|
"o-dpck__month__cell--selected",
|
|
null,
|
|
K(g, a.modelValue, c.value.multiple) || te(g, a.modelValue, c.value.multiple) || O(
|
|
g,
|
|
V.value,
|
|
c.value.multiple
|
|
)
|
|
],
|
|
[
|
|
"monthCellFirstSelectedClass",
|
|
"o-dpck__month__cell--first-selected",
|
|
null,
|
|
K(
|
|
g,
|
|
Array.isArray(a.modelValue) && a.modelValue[0],
|
|
c.value.multiple
|
|
)
|
|
],
|
|
[
|
|
"monthCellWithinSelectedClass",
|
|
"o-dpck__month__cell--within-selected",
|
|
null,
|
|
te(g, a.modelValue, c.value.multiple)
|
|
],
|
|
[
|
|
"monthCellLastSelectedClass",
|
|
"o-dpck__month__cell--last-selected",
|
|
null,
|
|
K(
|
|
g,
|
|
Array.isArray(a.modelValue) && a.modelValue[1],
|
|
c.value.multiple
|
|
)
|
|
],
|
|
[
|
|
"monthCellWithinHoveredRangeClass",
|
|
"o-dpck__month__cell--within-hovered-range",
|
|
null,
|
|
b.value && b.value.length === 2 && (K(g, b.value) || te(g, b.value))
|
|
],
|
|
[
|
|
"monthCellFirstHoveredClass",
|
|
"o-dpck__month__cell--first-hovered",
|
|
null,
|
|
K(
|
|
g,
|
|
Array.isArray(b.value) && b.value[0]
|
|
)
|
|
],
|
|
[
|
|
"monthCellWithinHoveredClass",
|
|
"o-dpck__month__cell--within-hovered",
|
|
null,
|
|
te(g, b.value)
|
|
],
|
|
[
|
|
"monthCellLastHoveredClass",
|
|
"o-dpck__month__cell--last-hovered",
|
|
null,
|
|
K(
|
|
g,
|
|
Array.isArray(b.value) && b.value[1]
|
|
)
|
|
],
|
|
[
|
|
"monthCellTodayClass",
|
|
"o-dpck__month__cell--today",
|
|
null,
|
|
K(g, c.value.dateCreator())
|
|
],
|
|
[
|
|
"monthCellSelectableclass",
|
|
"o-dpck__month__cell--selectable",
|
|
null,
|
|
B(g) && !c.value.disabled && !c.value.readonly
|
|
],
|
|
[
|
|
"monthCellUnselectableClass",
|
|
"o-dpck__month__cell--unselectable",
|
|
null,
|
|
!B(g) || c.value.disabled
|
|
]
|
|
);
|
|
return [...J.value, ...w.value];
|
|
}
|
|
return (g, w) => (f(), $("section", {
|
|
class: P(s(D))
|
|
}, [
|
|
se("div", {
|
|
class: P(s(M))
|
|
}, [
|
|
se("div", {
|
|
class: P(s(Y))
|
|
}, [
|
|
(f(!0), $(ke, null, $e(k.value, (x, R) => (f(), $(ke, { key: R }, [
|
|
!c.value.disabled && !c.value.readonly && B(x) ? (f(), $("div", {
|
|
key: 0,
|
|
ref_for: !0,
|
|
ref: (_) => v(x, _),
|
|
class: P(j(x)),
|
|
role: "button",
|
|
tabindex: e.focusedDate.month === x.getMonth() ? null : 0,
|
|
onClick: ve((_) => C(x), ["prevent"]),
|
|
onMouseenter: (_) => E(x),
|
|
onFocus: (_) => E(x),
|
|
onKeydown: ve((_) => S(_, x), ["prevent"])
|
|
}, [
|
|
Ve(ce(e.monthNames[x.getMonth()]) + " ", 1),
|
|
F(x).length ? (f(), $("div", Ln, [
|
|
(f(!0), $(ke, null, $e(F(x), (_, N) => (f(), $("div", {
|
|
key: N,
|
|
class: P(["event", _.type])
|
|
}, null, 2))), 128))
|
|
])) : G("", !0)
|
|
], 42, Nn)) : (f(), $("div", {
|
|
key: 1,
|
|
class: P(j(x))
|
|
}, ce(e.monthNames[x.getMonth()]), 3))
|
|
], 64))), 128))
|
|
], 2)
|
|
], 2)
|
|
], 2));
|
|
}
|
|
}), jn = ["value", "disabled"], Wn = ["value"], el = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "ODatepicker",
|
|
configField: "datepicker",
|
|
__name: "Datepicker",
|
|
props: /* @__PURE__ */ Be({
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** @model */
|
|
modelValue: {
|
|
type: [Date, Array],
|
|
default: void 0
|
|
},
|
|
/** The active state of the dropdown, use v-model:active to make it two-way binding. */
|
|
active: { type: Boolean, default: !1 },
|
|
/**
|
|
* Define picker mode
|
|
* @values date, month
|
|
*/
|
|
type: {
|
|
type: String,
|
|
default: "date",
|
|
validator: (e) => ["month", "date"].indexOf(e) >= 0
|
|
},
|
|
/** Set custom day names, else use names based on locale */
|
|
dayNames: {
|
|
type: Array,
|
|
default: () => i("datepicker.dayNames", void 0)
|
|
},
|
|
/** Set custom month names, else use names based on locale */
|
|
monthNames: {
|
|
type: Array,
|
|
default: () => i("datepicker.monthNames", void 0)
|
|
},
|
|
/**
|
|
* Size of the control input
|
|
* @values small, medium, large
|
|
*/
|
|
size: {
|
|
type: String,
|
|
default: () => i("datepicker.size")
|
|
},
|
|
/** Set default date to focus on */
|
|
focusedDate: { type: Date, default: void 0 },
|
|
/** Events to display on picker */
|
|
events: { type: Array, default: void 0 },
|
|
/** Event indicators for style class definiton */
|
|
indicators: { type: String, default: "dots" },
|
|
/** Min date to select */
|
|
minDate: { type: Date, default: void 0 },
|
|
/** Max date to select */
|
|
maxDate: { type: Date, default: void 0 },
|
|
/** Enable date range selection */
|
|
range: { type: Boolean, default: !1 },
|
|
/** Makes input full width when inside a grouped or addon field */
|
|
expanded: { type: Boolean, default: !1 },
|
|
/** Makes the input rounded */
|
|
rounded: { type: Boolean, default: !1 },
|
|
/** Display datepicker inline */
|
|
inline: { type: Boolean, default: !1 },
|
|
/** Input placeholder */
|
|
placeholder: { type: String, default: void 0 },
|
|
/** Same as native input readonly */
|
|
readonly: { type: Boolean, default: !1 },
|
|
/** Same as native, also push new item to v-model instead of replacing */
|
|
multiple: { type: Boolean, default: !1 },
|
|
/** Same as native disabled */
|
|
disabled: { type: Boolean, default: !1 },
|
|
/** Open dropdown on focus */
|
|
openOnFocus: {
|
|
type: Boolean,
|
|
default: () => i("datepicker.openOnFocus", !0)
|
|
},
|
|
/** Close dropdown on click */
|
|
closeOnClick: {
|
|
type: Boolean,
|
|
default: () => i("datepicker.closeOnClick", !0)
|
|
},
|
|
/** Date format locale */
|
|
locale: {
|
|
type: String,
|
|
default: () => i("locale")
|
|
},
|
|
/** Custom function to format a date into a string */
|
|
dateFormatter: {
|
|
type: Function,
|
|
default: (e, l) => i("datepicker.dateFormatter", l)(e)
|
|
},
|
|
/** Custom function to parse a string into a date */
|
|
dateParser: {
|
|
type: Function,
|
|
default: (e, l) => i("datepicker.dateParser", l)(e)
|
|
},
|
|
/** Date creator function, default is `new Date()` */
|
|
dateCreator: {
|
|
type: Function,
|
|
default: () => i("datepicker.dateCreator", () => /* @__PURE__ */ new Date())()
|
|
},
|
|
/** Define a list of dates which can be selected */
|
|
selectableDates: {
|
|
type: [Array, Function],
|
|
default: () => []
|
|
},
|
|
/** Define a list of dates which can not be selected */
|
|
unselectableDates: {
|
|
type: [Array, Function],
|
|
default: () => []
|
|
},
|
|
/** Define a list of weeks which can not be selected */
|
|
unselectableDaysOfWeek: {
|
|
type: Array,
|
|
default: () => i("datepicker.unselectableDaysOfWeek", void 0)
|
|
},
|
|
/** Show nearby month days */
|
|
nearbyMonthDays: {
|
|
type: Boolean,
|
|
default: () => i("datepicker.nearbyMonthDays", !0)
|
|
},
|
|
/** Define if nearby month days can be selected */
|
|
nearbySelectableMonthDays: {
|
|
type: Boolean,
|
|
default: () => i("datepicker.nearbySelectableMonthDays", !1)
|
|
},
|
|
/** Show weeek numbers */
|
|
showWeekNumber: {
|
|
type: Boolean,
|
|
default: () => i("datepicker.showWeekNumber", !1)
|
|
},
|
|
/** Define if weeek numbers are clickable */
|
|
weekNumberClickable: {
|
|
type: Boolean,
|
|
default: () => i("datepicker.weekNumberClickable", !1)
|
|
},
|
|
/** Set the first day of a week */
|
|
firstDayOfWeek: {
|
|
type: Number,
|
|
default: () => i("datepicker.firstDayOfWeek", 0)
|
|
},
|
|
/** Rules for the first week : 1 for the 1st January, 4 for the 4th January */
|
|
rulesForFirstWeek: { type: Number, default: () => 4 },
|
|
/** Define the range of years to show */
|
|
yearsRange: {
|
|
type: Array,
|
|
default: () => i("datepicker.yearsRange", [-100, 10])
|
|
},
|
|
/** Trap dropdown on focus */
|
|
trapFocus: {
|
|
type: Boolean,
|
|
default: () => i("datepicker.trapFocus", !0)
|
|
},
|
|
/** Position of the dropdown relative to the input */
|
|
position: { type: String, default: void 0 },
|
|
/** Enable dropdown mobile modal */
|
|
mobileModal: {
|
|
type: Boolean,
|
|
default: () => i("datepicker.mobileModal", !0)
|
|
},
|
|
/**
|
|
* Enable mobile native input if mobile agent
|
|
* (Default will be switched to `false` in 0.9)
|
|
*/
|
|
mobileNative: {
|
|
type: Boolean,
|
|
default: () => i("datepicker.mobileNative", !0)
|
|
// TODO: make false
|
|
},
|
|
/**
|
|
* Icon pack to use
|
|
* @values mdi, fa, fas and any other custom icon pack
|
|
*/
|
|
iconPack: {
|
|
type: String,
|
|
default: () => i("datepicker.iconPack", void 0)
|
|
},
|
|
/** Icon to be shown */
|
|
icon: {
|
|
type: String,
|
|
default: () => i("datepicker.icon", void 0)
|
|
},
|
|
/** Icon to be added on the right side */
|
|
iconRight: {
|
|
type: String,
|
|
default: () => i("datepicker.iconRight", void 0)
|
|
},
|
|
/** Make the icon right clickable */
|
|
iconRightClickable: { type: Boolean, default: !1 },
|
|
/** Icon name for previous icon */
|
|
iconPrev: {
|
|
type: String,
|
|
default: () => i("datepicker.iconPrev", "chevron-left")
|
|
},
|
|
/** Icon name for next icon */
|
|
iconNext: {
|
|
type: String,
|
|
default: () => i("datepicker.iconNext", "chevron-right")
|
|
},
|
|
/** Mobile breakpoint as max-width value */
|
|
mobileBreakpoint: {
|
|
type: String,
|
|
default: () => i("datepicker.mobileBreakpoint")
|
|
},
|
|
/**
|
|
* Append the component to another part of the DOM.
|
|
* Set `true` to append the component to the body.
|
|
* In addition, any CSS selector string or an actual DOM node can be used.
|
|
*/
|
|
teleport: {
|
|
type: [Boolean, String, Object],
|
|
default: () => i("datepicker.teleport", !1)
|
|
},
|
|
/** Enable html 5 native validation */
|
|
useHtml5Validation: {
|
|
type: Boolean,
|
|
default: () => i("useHtml5Validation", !0)
|
|
},
|
|
/** The message which is shown when a validation error occurs */
|
|
validationMessage: { type: String, default: void 0 },
|
|
/** Accessibility next button aria label */
|
|
ariaNextLabel: {
|
|
type: String,
|
|
default: () => i("datepicker.ariaNextLabel", "Next Page")
|
|
},
|
|
/** Accessibility previous button aria label */
|
|
ariaPreviousLabel: {
|
|
type: String,
|
|
default: () => i("datepicker.ariaNextLabel", "Previous Page")
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Datepicker size */
|
|
sizeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Datepicker box where you choose the date */
|
|
boxClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Datepicker header inside the box */
|
|
headerClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Datepicker buttons inside the box */
|
|
headerButtonsClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Datepicker buttons inside the box when a size is choosen */
|
|
headerButtonsSizeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the prev button inside the Datepicker box */
|
|
prevButtonClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the next button inside the Datepicker box */
|
|
nextButtonClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the month and year selects container inside the Datepicker box */
|
|
listsClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Datepicker footer */
|
|
footerClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Datepicker table inside the box */
|
|
tableClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of Datepicker header with days of the week inside the table */
|
|
tableHeadClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the cell inside the table header */
|
|
tableHeadCellClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the table body inside the box */
|
|
tableBodyClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the table row */
|
|
tableRowClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the table cell */
|
|
tableCellClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the table cell when nearby month days are hidden */
|
|
tableCellInvisibleClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of table cell when it's selected */
|
|
tableCellSelectedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the first selected table cell when in range */
|
|
tableCellFirstSelectedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the table cells within the range when the range is selected */
|
|
tableCellWithinSelectedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the last selected table cell during range selection */
|
|
tableCellLastSelectedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the first hovered table cell during range selection */
|
|
tableCellFirstHoveredClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the table cell when hovered during range selection */
|
|
tableCellWithinHoveredClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the last table cell hovered during range selection */
|
|
tableCellLastHoveredClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the table cell of the current day */
|
|
tableCellTodayClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the table cell that is selectable */
|
|
tableCellSelectableClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the table cell that is unselectable */
|
|
tableCellUnselectableClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the table cell when nearby days (prev/next month) are selectable */
|
|
tableCellNearbyClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the cell of a row when at least one event is present */
|
|
tableCellEventsClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the events container */
|
|
tableEventsClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the event */
|
|
tableEventClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the event indicator when a `variant` is specified */
|
|
tableEventVariantClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the event indicator */
|
|
tableEventIndicatorsClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Datepicker table inside the box when type is month */
|
|
monthClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the table body inside the box when type is month */
|
|
monthBodyClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the table container when type is month */
|
|
monthTableClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the table cell when type is month */
|
|
monthCellClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of table cell when it's selected when type is month */
|
|
monthCellSelectedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the first selected table cell when in range when type is month */
|
|
monthCellFirstSelectedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the table cells within the range when the range is selected when type is month */
|
|
monthCellWithinSelectedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the last selected table cell during range selection when type is month */
|
|
monthCellLastSelectedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the first hovered table cell during range selection when type is month */
|
|
monthCellWithinHoveredRangeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the table cell when hovered during range selection when type is month */
|
|
monthCellFirstHoveredClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the table cell when hovered during range selection and cell is in range when type is month */
|
|
monthCellWithinHoveredClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the last table cell hovered during range selection when type is month */
|
|
monthCellLastHoveredClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the table cell of the current day when type is month */
|
|
monthCellTodayClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the table cell that is selectable when type is month */
|
|
monthCellSelectableClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the table cell that is unselectable when type is month */
|
|
monthCellUnselectableClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/**Class of the events container when type is month */
|
|
monthCellEventsClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Datepicker when on mobile */
|
|
mobileClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/**
|
|
* Class configuration for the internal input component
|
|
* @ignore
|
|
*/
|
|
inputClasses: {
|
|
type: Object,
|
|
default: () => i("datepicker.inputClasses", {})
|
|
},
|
|
/**
|
|
* Class configuration for the internal dropdown component
|
|
* @ignore
|
|
*/
|
|
dropdownClasses: {
|
|
type: Object,
|
|
default: () => i(
|
|
"datepicker.dropdownClasses",
|
|
{}
|
|
)
|
|
},
|
|
/**
|
|
* Class configuration for the internal select component
|
|
* @ignore
|
|
*/
|
|
selectClasses: {
|
|
type: Object,
|
|
default: () => i("datepicker.selectClasses", {})
|
|
}
|
|
}, {
|
|
modelValue: { default: null },
|
|
modelModifiers: {},
|
|
active: { type: Boolean, default: !1 },
|
|
activeModifiers: {}
|
|
}),
|
|
emits: /* @__PURE__ */ Be(["update:modelValue", "update:active", "range-start", "range-end", "change-month", "change-year", "focus", "blur", "invalid", "icon-click", "icon-right-click"], ["update:modelValue", "update:active"]),
|
|
setup(e, { expose: l, emit: a }) {
|
|
const t = e, o = a, { defaultDateFormatter: r, defaultDateParser: u } = ma(t), { isMobile: c } = ct(t.mobileBreakpoint), y = z(), d = Ee(e, "modelValue"), v = Ee(e, "active"), m = n(
|
|
() => Array.isArray(d.value) ? t.dateFormatter([...d.value], r) : t.dateFormatter(d.value, r)
|
|
), k = n(() => t.type === "month");
|
|
fe(
|
|
() => t.modelValue,
|
|
(N) => {
|
|
const L = Array.isArray(N), H = L ? N.length ? N[N.length - 1] : t.dateCreator() : N || t.dateCreator();
|
|
(!L || L && Array.isArray(d.value) && N.length > d.value.length) && (F.value = {
|
|
day: H.getDate(),
|
|
month: H.getMonth(),
|
|
year: H.getFullYear()
|
|
});
|
|
}
|
|
), fe(
|
|
() => t.focusedDate,
|
|
(N) => {
|
|
N && (F.value = {
|
|
day: N.getDate(),
|
|
month: N.getMonth(),
|
|
year: N.getFullYear()
|
|
});
|
|
}
|
|
);
|
|
const b = (Array.isArray(t.modelValue) ? t.modelValue[0] : t.modelValue) || t.focusedDate || t.dateCreator();
|
|
!t.modelValue && t.maxDate && t.maxDate.getFullYear() < b.getFullYear() && b.setFullYear(t.maxDate.getFullYear());
|
|
const F = z({
|
|
day: b.getDate(),
|
|
month: b.getMonth(),
|
|
year: b.getFullYear()
|
|
});
|
|
fe(
|
|
() => F.value.month,
|
|
(N) => o("change-month", N)
|
|
), fe(
|
|
() => F.value.year,
|
|
(N) => o("change-year", N)
|
|
);
|
|
const B = n(
|
|
() => Array.isArray(t.monthNames) ? t.monthNames : Pn(t.locale)
|
|
), S = n(() => {
|
|
let N = 0, L = 12;
|
|
return t.minDate && F.value.year === t.minDate.getFullYear() && (N = t.minDate.getMonth()), t.maxDate && F.value.year === t.maxDate.getFullYear() && (L = t.maxDate.getMonth()), B.value.map((H, Q) => ({
|
|
name: H,
|
|
index: Q,
|
|
disabled: Q < N || Q > L
|
|
}));
|
|
}), C = n(() => Array.isArray(t.dayNames) ? t.dayNames : Mn(t.locale)), p = n(() => {
|
|
let N = F.value.year + t.yearsRange[1];
|
|
t.maxDate && t.maxDate.getFullYear() < N && (N = Math.max(
|
|
t.maxDate.getFullYear(),
|
|
F.value.year
|
|
));
|
|
let L = F.value.year + t.yearsRange[0];
|
|
return t.minDate && t.minDate.getFullYear() > L && (L = Math.min(
|
|
t.minDate.getFullYear(),
|
|
F.value.year
|
|
)), Array.from(
|
|
{ length: N - L + 1 || 1 },
|
|
(H, Q) => L + Q
|
|
).reverse();
|
|
}), V = n(() => {
|
|
if (!t.minDate)
|
|
return !0;
|
|
if (k.value)
|
|
return F.value.year > t.minDate.getFullYear();
|
|
const N = new Date(
|
|
F.value.year,
|
|
F.value.month
|
|
), L = new Date(
|
|
t.minDate.getFullYear(),
|
|
t.minDate.getMonth()
|
|
);
|
|
return N > L;
|
|
});
|
|
function T() {
|
|
t.disabled || (k.value ? F.value.year -= 1 : F.value.month > 0 ? F.value.month -= 1 : (F.value.month = 11, F.value.year -= 1));
|
|
}
|
|
const I = n(() => {
|
|
if (!t.maxDate)
|
|
return !0;
|
|
if (k.value)
|
|
return F.value.year < t.maxDate.getFullYear();
|
|
const N = new Date(
|
|
F.value.year,
|
|
F.value.month
|
|
), L = new Date(
|
|
t.maxDate.getFullYear(),
|
|
t.maxDate.getMonth()
|
|
);
|
|
return N < L;
|
|
});
|
|
function E() {
|
|
t.disabled || (k.value ? F.value.year += 1 : F.value.month < 11 ? F.value.month += 1 : (F.value.month = 0, F.value.year += 1));
|
|
}
|
|
function K(N) {
|
|
Array.isArray(N) && (N = N[0]);
|
|
const L = new Date(N);
|
|
if (!N || !L || isNaN(L.getTime()))
|
|
return null;
|
|
if (k.value) {
|
|
const H = L.getFullYear(), Q = L.getMonth() + 1;
|
|
return H + "-" + ((Q < 10 ? "0" : "") + Q);
|
|
} else {
|
|
const H = L.getFullYear(), Q = L.getMonth() + 1, ne = L.getDate();
|
|
return H + "-" + ((Q < 10 ? "0" : "") + Q) + "-" + ((ne < 10 ? "0" : "") + ne);
|
|
}
|
|
}
|
|
function te(N) {
|
|
const L = t.dateParser(N, u), H = Zt(L) || Array.isArray(L) && L.length === 2 && Zt(L[0]) && Zt(L[1]);
|
|
d.value = H ? L : null;
|
|
}
|
|
function O(N) {
|
|
const L = N ? N.split("-") : [];
|
|
if (L.length === 3) {
|
|
const H = parseInt(L[0], 10), Q = parseInt(L[1]) - 1, ne = parseInt(L[2]);
|
|
d.value = new Date(H, Q, ne);
|
|
} else
|
|
d.value = null;
|
|
}
|
|
const D = h(
|
|
["rootClass", "o-dpck"],
|
|
[
|
|
"sizeClass",
|
|
"o-dpck--",
|
|
n(() => t.size),
|
|
n(() => !!t.size)
|
|
],
|
|
["mobileClass", "o-dpck--mobile", null, c],
|
|
["expandedClass", "o-dpck--expanded", null, n(() => t.expanded)]
|
|
), M = h(["headerClass", "o-dpck__header"]), Y = h(
|
|
["headerButtonsClass", "o-dpck__header__buttons"],
|
|
[
|
|
"headerButtonsSizeClass",
|
|
"o-dpck__header__buttons--",
|
|
n(() => t.size),
|
|
n(() => !!t.size)
|
|
]
|
|
), J = h([
|
|
"prevButtonClass",
|
|
"o-dpck__header__previous"
|
|
]), j = h([
|
|
"nextButtonClass",
|
|
"o-dpck__header__next"
|
|
]), g = h(["listsClass", "o-dpck__header__list"]), w = h(["footerClass", "o-dpck__footer"]), x = h([
|
|
"dropdownClasses.rootClass",
|
|
"o-tpck__dropdown"
|
|
]), R = h(["boxClass", "o-dpck__box"]), _ = n(() => Xe(R.value));
|
|
return l({ focus: () => {
|
|
var N;
|
|
return (N = y.value) == null ? void 0 : N.focus();
|
|
} }), (N, L) => (f(), ie(_a, {
|
|
ref_key: "pickerRef",
|
|
ref: y,
|
|
active: v.value,
|
|
"onUpdate:active": L[10] || (L[10] = (H) => v.value = H),
|
|
"data-oruga": "datepicker",
|
|
value: d.value,
|
|
picker: t,
|
|
"formatted-value": m.value,
|
|
"native-type": k.value ? "month" : "date",
|
|
"native-value": K(d.value),
|
|
"native-max": K(e.maxDate),
|
|
"native-min": K(e.minDate),
|
|
"stay-open": e.multiple,
|
|
"dropdown-classes": s(x),
|
|
"root-classes": s(D),
|
|
"box-class": _.value,
|
|
onChange: te,
|
|
onNativeChange: O,
|
|
onFocus: L[11] || (L[11] = (H) => N.$emit("focus", H)),
|
|
onBlur: L[12] || (L[12] = (H) => N.$emit("blur", H)),
|
|
onInvalid: L[13] || (L[13] = (H) => N.$emit("invalid", H)),
|
|
onIconClick: L[14] || (L[14] = (H) => N.$emit("icon-click", H)),
|
|
onIconRightClick: L[15] || (L[15] = (H) => N.$emit("icon-right-click", H))
|
|
}, It({
|
|
default: ue(() => [
|
|
se("header", {
|
|
class: P(s(M))
|
|
}, [
|
|
Z(N.$slots, "header", {}, () => [
|
|
se("div", {
|
|
class: P(s(Y))
|
|
}, [
|
|
e.disabled ? G("", !0) : (f(), ie(At, {
|
|
key: 0,
|
|
class: P(s(J)),
|
|
disabled: !V.value,
|
|
"aria-label": e.ariaPreviousLabel,
|
|
"icon-pack": e.iconPack,
|
|
"icon-left": e.iconPrev,
|
|
outlined: "",
|
|
onClick: ve(T, ["prevent"]),
|
|
onKeydown: [
|
|
he(ve(T, ["prevent"]), ["enter"]),
|
|
he(ve(T, ["prevent"]), ["space"])
|
|
]
|
|
}, null, 8, ["class", "disabled", "aria-label", "icon-pack", "icon-left", "onKeydown"])),
|
|
e.disabled ? G("", !0) : (f(), ie(At, {
|
|
key: 1,
|
|
class: P(s(j)),
|
|
disabled: !I.value,
|
|
"aria-label": e.ariaNextLabel,
|
|
"icon-pack": e.iconPack,
|
|
"icon-left": e.iconNext,
|
|
outlined: "",
|
|
onClick: ve(E, ["prevent"]),
|
|
onKeydown: [
|
|
he(ve(E, ["prevent"]), ["enter"]),
|
|
he(ve(E, ["prevent"]), ["space"])
|
|
]
|
|
}, null, 8, ["class", "disabled", "aria-label", "icon-pack", "icon-left", "onKeydown"])),
|
|
se("div", {
|
|
class: P(s(g))
|
|
}, [
|
|
k.value ? G("", !0) : (f(), ie(pt, ye({
|
|
key: 0,
|
|
modelValue: F.value.month,
|
|
"onUpdate:modelValue": L[0] || (L[0] = (H) => F.value.month = H),
|
|
disabled: e.disabled,
|
|
size: e.size
|
|
}, e.selectClasses), {
|
|
default: ue(() => [
|
|
(f(!0), $(ke, null, $e(S.value, (H) => (f(), $("option", {
|
|
key: H.name,
|
|
value: H.index,
|
|
disabled: H.disabled
|
|
}, ce(H.name), 9, jn))), 128))
|
|
]),
|
|
_: 1
|
|
}, 16, ["modelValue", "disabled", "size"])),
|
|
me(pt, ye({
|
|
modelValue: F.value.year,
|
|
"onUpdate:modelValue": L[1] || (L[1] = (H) => F.value.year = H),
|
|
disabled: e.disabled,
|
|
size: e.size
|
|
}, e.selectClasses), {
|
|
default: ue(() => [
|
|
(f(!0), $(ke, null, $e(p.value, (H) => (f(), $("option", {
|
|
key: H,
|
|
value: H
|
|
}, ce(H), 9, Wn))), 128))
|
|
]),
|
|
_: 1
|
|
}, 16, ["modelValue", "disabled", "size"])
|
|
], 2)
|
|
], 2)
|
|
])
|
|
], 2),
|
|
Z(N.$slots, "body", {}, () => [
|
|
k.value ? (f(), ie(En, {
|
|
key: 0,
|
|
modelValue: d.value,
|
|
"onUpdate:modelValue": L[2] || (L[2] = (H) => d.value = H),
|
|
"focused-date": F.value,
|
|
"onUpdate:focusedDate": L[3] || (L[3] = (H) => F.value = H),
|
|
"month-names": B.value,
|
|
"picker-props": t,
|
|
onRangeStart: L[4] || (L[4] = (H) => N.$emit("range-start", H)),
|
|
onRangeEnd: L[5] || (L[5] = (H) => N.$emit("range-end", H))
|
|
}, null, 8, ["modelValue", "focused-date", "month-names", "picker-props"])) : (f(), ie(Hn, {
|
|
key: 1,
|
|
modelValue: d.value,
|
|
"onUpdate:modelValue": L[6] || (L[6] = (H) => d.value = H),
|
|
"focused-date": F.value,
|
|
"onUpdate:focusedDate": L[7] || (L[7] = (H) => F.value = H),
|
|
"day-names": C.value,
|
|
"month-names": B.value,
|
|
"picker-props": t,
|
|
onRangeStart: L[8] || (L[8] = (H) => N.$emit("range-start", H)),
|
|
onRangeEnd: L[9] || (L[9] = (H) => N.$emit("range-end", H))
|
|
}, null, 8, ["modelValue", "focused-date", "day-names", "month-names", "picker-props"]))
|
|
]),
|
|
N.$slots.footer ? (f(), $("footer", {
|
|
key: 0,
|
|
class: P(s(w))
|
|
}, [
|
|
Z(N.$slots, "footer")
|
|
], 2)) : G("", !0)
|
|
]),
|
|
_: 2
|
|
}, [
|
|
N.$slots.trigger ? {
|
|
name: "trigger",
|
|
fn: ue(() => [
|
|
Z(N.$slots, "trigger")
|
|
]),
|
|
key: "0"
|
|
} : void 0
|
|
]), 1032, ["active", "value", "picker", "formatted-value", "native-type", "native-value", "native-max", "native-min", "stay-open", "dropdown-classes", "root-classes", "box-class"]));
|
|
}
|
|
}), Yn = {
|
|
install(e) {
|
|
Fe(e, el);
|
|
}
|
|
}, Et = "AM", jt = "PM", Kn = "24", aa = "12";
|
|
function Un(e) {
|
|
const l = n(
|
|
() => new Intl.DateTimeFormat(e.locale, {
|
|
hour: "numeric",
|
|
minute: "numeric",
|
|
second: e.enableSeconds ? "numeric" : void 0
|
|
}).resolvedOptions()
|
|
), a = n(
|
|
() => e.hourFormat && e.hourFormat === Kn || !e.hourFormat && !l.value.hour12
|
|
), t = n(
|
|
() => new Intl.DateTimeFormat(e.locale, {
|
|
hour: l.value.hour || "numeric",
|
|
minute: l.value.minute || "numeric",
|
|
second: e.enableSeconds ? l.value.second || "numeric" : void 0,
|
|
hourCycle: a.value ? "h23" : "h12"
|
|
})
|
|
), o = n(() => {
|
|
const b = e.timeCreator();
|
|
return b.setHours(10), b.setSeconds(0), b.setMinutes(0), b.setMilliseconds(0), b;
|
|
}), r = n(() => {
|
|
if (t.value.formatToParts && typeof t.value.formatToParts == "function") {
|
|
const b = o.value;
|
|
b.setHours(10);
|
|
const F = t.value.formatToParts(b).find((B) => B.type === "dayPeriod");
|
|
if (F)
|
|
return F.value;
|
|
}
|
|
return Et;
|
|
}), u = n(() => {
|
|
if (t.value.formatToParts && typeof t.value.formatToParts == "function") {
|
|
const b = o.value;
|
|
b.setHours(20);
|
|
const F = t.value.formatToParts(b).find((B) => B.type === "dayPeriod");
|
|
if (F)
|
|
return F.value;
|
|
}
|
|
return jt;
|
|
}), c = n(() => [r.value, u.value]), y = n(() => {
|
|
if (t.value.formatToParts && typeof t.value.formatToParts == "function") {
|
|
const b = o.value, F = t.value.formatToParts(b), B = F.find(
|
|
(S, C) => C > 0 && F[C - 1].type === "hour"
|
|
);
|
|
if (B)
|
|
return B.value;
|
|
}
|
|
return ":";
|
|
}), d = n(() => {
|
|
if (t.value.formatToParts && typeof t.value.formatToParts == "function") {
|
|
const b = o.value, F = t.value.formatToParts(b), B = F.find(
|
|
(S, C) => C > 0 && F[C - 1].type === "minute"
|
|
);
|
|
if (B)
|
|
return B.value;
|
|
}
|
|
return ":";
|
|
}), v = n(() => {
|
|
if (t.value.formatToParts && typeof t.value.formatToParts == "function") {
|
|
const b = o.value, F = t.value.formatToParts(b), B = F.find(
|
|
(S, C) => C > 0 && F[C - 1].type === "second"
|
|
);
|
|
if (B)
|
|
return B.value;
|
|
}
|
|
});
|
|
function m(b) {
|
|
return t.value.format(b);
|
|
}
|
|
function k(b) {
|
|
if (!b)
|
|
return null;
|
|
if (t.value.formatToParts && typeof t.value.formatToParts == "function") {
|
|
const T = t.value.formatToParts(o.value).map((E) => E.type === "literal" ? E.value.replace(/ /g, "\\s?") : E.type === "dayPeriod" ? `((?!=<${E.type}>)(${r.value}|${u.value}|${Et}|${jt}|${Et.toLowerCase()}|${jt.toLowerCase()})?)` : `((?!=<${E.type}>)\\d+)`).join(""), I = pa(T, b);
|
|
if (I.hour = I.hour ? parseInt(I.hour, 10) : null, I.minute = I.minute ? parseInt(I.minute, 10) : null, I.second = I.second ? parseInt(I.second, 10) : null, I.hour && I.hour >= 0 && I.hour < 24 && I.minute && I.minute >= 0 && I.minute < 59) {
|
|
I.dayPeriod && (I.dayPeriod.toLowerCase() === u.value.toLowerCase() || I.dayPeriod.toLowerCase() === jt.toLowerCase()) && I.hour < 12 && (I.hour += 12);
|
|
const E = o.value;
|
|
return E.setHours(I.hour), E.setMinutes(I.minute), E.setSeconds(I.second || 0), E;
|
|
}
|
|
}
|
|
let F = !1;
|
|
if (e.hourFormat === aa) {
|
|
const T = b.split(" ");
|
|
b = T[0], F = T[1] === r.value || T[1] === Et;
|
|
}
|
|
const B = b.split(":");
|
|
let S = parseInt(B[0], 10);
|
|
const C = parseInt(B[1], 10), p = e.enableSeconds ? parseInt(B[2], 10) : 0;
|
|
if (isNaN(S) || S < 0 || S > 23 || e.hourFormat === aa && (S < 1 || S > 12) || isNaN(C) || C < 0 || C > 59)
|
|
return null;
|
|
const V = o.value;
|
|
return V.setSeconds(p), V.setMinutes(C), e.hourFormat === aa && (F && S === 12 ? S = 0 : !F && S !== 12 && (S += 12)), V.setHours(S), new Date(V.getTime());
|
|
}
|
|
return {
|
|
defaultTimeFormatter: m,
|
|
defaultTimeParser: k,
|
|
pmString: u,
|
|
amString: r,
|
|
meridiens: c,
|
|
isHourFormat24: a,
|
|
hourLiteral: y,
|
|
minuteLiteral: d,
|
|
secondLiteral: v
|
|
};
|
|
}
|
|
const qn = ["value", "disabled"], Xn = ["value", "disabled"], Gn = ["value", "disabled"], Jn = ["value", "disabled"], tl = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OTimepicker",
|
|
configField: "timepicker",
|
|
__name: "Timepicker",
|
|
props: /* @__PURE__ */ Be({
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** @model */
|
|
modelValue: { type: Date, default: void 0 },
|
|
/** The active state of the dropdown */
|
|
active: { type: Boolean, default: !1 },
|
|
/** Min time to select */
|
|
minTime: { type: Date, default: void 0 },
|
|
/** Max time to select */
|
|
maxTime: { type: Date, default: void 0 },
|
|
/** Display datepicker inline */
|
|
inline: { type: Boolean, default: !1 },
|
|
/** Input placeholder */
|
|
placeholder: { type: String, default: void 0 },
|
|
/** Makes input full width when inside a grouped or addon field */
|
|
expanded: { type: Boolean, default: !1 },
|
|
/** Makes the input rounded */
|
|
rounded: { type: Boolean, default: !1 },
|
|
/** Same as native input readonly */
|
|
readonly: { type: Boolean, default: !1 },
|
|
/** Same as native disabled */
|
|
disabled: { type: Boolean, default: !1 },
|
|
/**
|
|
* Size of the button
|
|
* @values small, medium, large
|
|
*/
|
|
size: {
|
|
type: String,
|
|
default: () => i("timepicker.size")
|
|
},
|
|
hourFormat: {
|
|
type: [String, Number],
|
|
validator: (e) => ["12", "24", 12, 24, void 0].includes(e),
|
|
default: void 0
|
|
},
|
|
incrementHours: { type: Number, default: 1 },
|
|
incrementMinutes: { type: Number, default: 1 },
|
|
incrementSeconds: { type: Number, default: 1 },
|
|
/** Open dropdown on focus */
|
|
openOnFocus: {
|
|
type: Boolean,
|
|
default: () => i("timepicker.openOnFocus", !0)
|
|
},
|
|
/** Close dropdown on click */
|
|
closeOnClick: {
|
|
type: Boolean,
|
|
default: () => i("timepicker.closeOnClick", !0)
|
|
},
|
|
enableSeconds: { type: Boolean, default: !1 },
|
|
defaultMinutes: { type: Number, default: void 0 },
|
|
defaultSeconds: { type: Number, default: void 0 },
|
|
/** Date format locale */
|
|
locale: {
|
|
type: String,
|
|
default: () => i("locale")
|
|
},
|
|
/** Custom function to format a date into a string */
|
|
timeFormatter: {
|
|
type: Function,
|
|
default: (e, l) => i("timepicker.timeFormatter", l)(e)
|
|
},
|
|
/** Custom function to parse a string into a date */
|
|
timeParser: {
|
|
type: Function,
|
|
default: (e, l) => i("timepicker.timeParser", l)(e)
|
|
},
|
|
/** time creator function, default is `new Date()` */
|
|
timeCreator: {
|
|
type: Function,
|
|
default: () => i("timepicker.timeCreator", () => /* @__PURE__ */ new Date())()
|
|
},
|
|
/** Define a list of times which can not be selected */
|
|
unselectableTimes: {
|
|
type: [Array, Function],
|
|
default: () => []
|
|
},
|
|
/** Reset the time inputs when meridian changes */
|
|
resetOnMeridianChange: {
|
|
type: Boolean,
|
|
default: !1
|
|
},
|
|
/** Dropdown trapFocus */
|
|
trapFocus: {
|
|
type: Boolean,
|
|
default: () => i("timepicker.trapFocus", !0)
|
|
},
|
|
/** Dropdown position */
|
|
position: { type: String, default: void 0 },
|
|
/** Enable dropdown mobile modal */
|
|
mobileModal: {
|
|
type: Boolean,
|
|
default: () => i("timepicker.mobileModal", !0)
|
|
},
|
|
/** Enable mobile native input if mobile agent */
|
|
mobileNative: {
|
|
type: Boolean,
|
|
default: () => i("timepicker.mobileNative", !0)
|
|
},
|
|
/**
|
|
* Icon pack to use
|
|
* @values mdi, fa, fas and any other custom icon pack
|
|
*/
|
|
iconPack: {
|
|
type: String,
|
|
default: () => i("timepicker.iconPack", void 0)
|
|
},
|
|
/** Icon to be shown */
|
|
icon: {
|
|
type: String,
|
|
default: () => i("timepicker.icon", void 0)
|
|
},
|
|
/** Icon to be added on the right side */
|
|
iconRight: {
|
|
type: String,
|
|
default: () => i("timepicker.iconRight", void 0)
|
|
},
|
|
/** Make the icon right clickable */
|
|
iconRightClickable: { type: Boolean, default: !1 },
|
|
/** Mobile breakpoint as max-width value */
|
|
mobileBreakpoint: {
|
|
type: String,
|
|
default: () => i("timepicker.mobileBreakpoint")
|
|
},
|
|
/**
|
|
* Append the component to another part of the DOM.
|
|
* Set `true` to append the component to the body.
|
|
* In addition, any CSS selector string or an actual DOM node can be used.
|
|
*/
|
|
teleport: {
|
|
type: [Boolean, String, Object],
|
|
default: () => i("timepicker.teleport", !1)
|
|
},
|
|
/** Enable html 5 native validation */
|
|
useHtml5Validation: {
|
|
type: Boolean,
|
|
default: () => i("useHtml5Validation", !0)
|
|
},
|
|
/** The message which is shown when a validation error occurs */
|
|
validationMessage: { type: String, default: void 0 },
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Timepicker component size */
|
|
sizeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Timepicker component box where you choose the date */
|
|
boxClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Timepicker separator */
|
|
separatorClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Timepicker footer */
|
|
footerClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/**
|
|
* Class configuration for the internal input component
|
|
* @ignore
|
|
*/
|
|
inputClasses: {
|
|
type: Object,
|
|
default: () => i("timepicker.inputClasses", {})
|
|
},
|
|
/**
|
|
* Class configuration for the internal dropdown component
|
|
* @ignore
|
|
*/
|
|
dropdownClasses: {
|
|
type: Object,
|
|
default: () => i("timepicker.dropdownClasses", {})
|
|
},
|
|
/**
|
|
* Class configuration for the internal select component
|
|
* @ignore
|
|
*/
|
|
selectClasses: {
|
|
type: Object,
|
|
default: () => i("timepicker.selectClasses", {})
|
|
}
|
|
}, {
|
|
modelValue: { default: void 0 },
|
|
modelModifiers: {},
|
|
active: { type: Boolean, default: !1 },
|
|
activeModifiers: {}
|
|
}),
|
|
emits: /* @__PURE__ */ Be(["update:modelValue", "update:active", "focus", "blur", "invalid", "icon-click", "icon-right-click"], ["update:modelValue", "update:active"]),
|
|
setup(e, { expose: l }) {
|
|
const a = e, { isMobile: t } = ct(a.mobileBreakpoint), {
|
|
defaultTimeFormatter: o,
|
|
defaultTimeParser: r,
|
|
pmString: u,
|
|
amString: c,
|
|
meridiens: y,
|
|
isHourFormat24: d,
|
|
hourLiteral: v,
|
|
minuteLiteral: m,
|
|
secondLiteral: k
|
|
} = Un(a), b = z(), F = Ee(e, "modelValue"), B = Ee(e, "active"), S = z(), C = z(), p = z(), V = z();
|
|
fe(
|
|
() => a.modelValue,
|
|
(ae) => {
|
|
ae ? (S.value = ae.getHours(), C.value = ae.getMinutes(), p.value = ae.getSeconds(), V.value = ae.getHours() >= 12 ? u.value : c.value) : (S.value = null, C.value = null, p.value = null, V.value = c.value);
|
|
},
|
|
{ immediate: !0 }
|
|
);
|
|
const T = n(
|
|
() => a.timeFormatter(a.modelValue, o)
|
|
), I = n(() => a.enableSeconds ? "1" : null);
|
|
fe(
|
|
() => a.hourFormat,
|
|
() => {
|
|
S.value !== null && (V.value = S.value >= 12 ? u.value : c.value);
|
|
}
|
|
), fe(
|
|
() => a.locale,
|
|
(ae) => {
|
|
ae || (V.value = c.value);
|
|
}
|
|
);
|
|
function E(ae, ee) {
|
|
return d.value || ee ? K(ae) : String(ae);
|
|
}
|
|
function K(ae) {
|
|
return (ae < 10 ? "0" : "") + ae;
|
|
}
|
|
const te = n(() => {
|
|
if (!a.incrementHours || a.incrementHours < 1)
|
|
throw new Error("Hour increment cannot be null or less than 1.");
|
|
const ae = [], ee = d.value ? 24 : 12;
|
|
for (let q = 0; q < ee; q += a.incrementHours) {
|
|
let Ce = q, le = Ce;
|
|
d.value || (Ce = q + 1, le = Ce, V.value === c.value ? Ce === 12 && (Ce = 0) : V.value === u.value && Ce !== 12 && (Ce += 12)), ae.push({
|
|
label: E(le, !1),
|
|
value: Ce
|
|
});
|
|
}
|
|
return ae;
|
|
}), O = n(() => {
|
|
if (!a.incrementMinutes || a.incrementMinutes < 1)
|
|
throw new Error("Minute increment cannot be null or less than 1.");
|
|
const ae = [];
|
|
for (let ee = 0; ee < 60; ee += a.incrementMinutes)
|
|
ae.push({
|
|
label: E(ee, !0),
|
|
value: ee
|
|
});
|
|
return ae;
|
|
}), D = n(() => {
|
|
if (!a.incrementSeconds || a.incrementSeconds < 1)
|
|
throw new Error("Second increment cannot be null or less than 1.");
|
|
const ae = [];
|
|
for (let ee = 0; ee < 60; ee += a.incrementSeconds)
|
|
ae.push({
|
|
label: E(ee, !0),
|
|
value: ee
|
|
});
|
|
return ae;
|
|
});
|
|
function M(ae) {
|
|
let ee = !1;
|
|
if (a.minTime) {
|
|
const q = a.minTime.getHours(), Ce = O.value.every((le) => Y(ae, le.value));
|
|
ee = ae < q || Ce;
|
|
}
|
|
if (a.maxTime && !ee) {
|
|
const q = a.maxTime.getHours();
|
|
ee = ae > q;
|
|
}
|
|
if (a.unselectableTimes && !ee)
|
|
if (typeof a.unselectableTimes == "function") {
|
|
const q = /* @__PURE__ */ new Date();
|
|
return q.setHours(ae), q.setMinutes(C.value), q.setSeconds(p.value), a.unselectableTimes(q);
|
|
} else
|
|
a.unselectableTimes.filter((Ce) => a.enableSeconds && p.value !== null ? Ce.getHours() === ae && Ce.getMinutes() === C.value && Ce.getSeconds() === p.value : C.value !== null ? Ce.getHours() === ae && Ce.getMinutes() === C.value : !1).length > 0 ? ee = !0 : ee = O.value.every((Ce) => a.unselectableTimes.filter((le) => le.getHours() === ae && le.getMinutes() === Ce.value).length > 0);
|
|
return ee;
|
|
}
|
|
function Y(ae, ee) {
|
|
let q = !1;
|
|
if (a.minTime) {
|
|
const Ce = a.minTime.getHours(), le = a.minTime.getMinutes();
|
|
q = ae === Ce && ee < le;
|
|
}
|
|
if (a.maxTime && !q) {
|
|
const Ce = a.maxTime.getHours(), le = a.maxTime.getMinutes();
|
|
q = ae === Ce && ee > le;
|
|
}
|
|
return q;
|
|
}
|
|
function J(ae) {
|
|
if (S.value === null)
|
|
return !1;
|
|
let ee = M(S.value) ? !0 : Y(S.value, ae);
|
|
if (a.unselectableTimes && !ee)
|
|
if (typeof a.unselectableTimes == "function") {
|
|
const q = /* @__PURE__ */ new Date();
|
|
return q.setHours(S.value), q.setMinutes(ae), q.setSeconds(p.value), a.unselectableTimes(q);
|
|
} else
|
|
ee = a.unselectableTimes.filter((Ce) => a.enableSeconds && p.value !== null ? Ce.getHours() === S.value && Ce.getMinutes() === ae && Ce.getSeconds() === p.value : Ce.getHours() === S.value && Ce.getMinutes() === ae).length > 0;
|
|
}
|
|
function j(ae) {
|
|
if (C.value == null)
|
|
return !1;
|
|
let ee = !1;
|
|
if (J(C.value))
|
|
ee = !0;
|
|
else {
|
|
if (a.minTime) {
|
|
const q = a.minTime.getHours(), Ce = a.minTime.getMinutes(), le = a.minTime.getSeconds();
|
|
ee = S.value === q && C.value === Ce && ae < le;
|
|
}
|
|
if (a.maxTime && !ee) {
|
|
const q = a.maxTime.getHours(), Ce = a.maxTime.getMinutes(), le = a.maxTime.getSeconds();
|
|
ee = S.value === q && C.value === Ce && ae > le;
|
|
}
|
|
}
|
|
if (a.unselectableTimes && !ee)
|
|
if (typeof a.unselectableTimes == "function") {
|
|
const q = /* @__PURE__ */ new Date();
|
|
return q.setHours(S.value), q.setMinutes(C.value), q.setSeconds(ae), a.unselectableTimes(q);
|
|
} else
|
|
ee = a.unselectableTimes.filter((Ce) => Ce.getHours() === S.value && Ce.getMinutes() === C.value && Ce.getSeconds() === ae).length > 0;
|
|
}
|
|
function g(ae) {
|
|
const ee = ae == "AM" ? 0 : 12;
|
|
for (let q = 0; q < 12; q++)
|
|
if (!M(q + ee))
|
|
return !1;
|
|
return !0;
|
|
}
|
|
function w(ae, ee, q, Ce) {
|
|
if (ae != null && ee != null && (!d.value && Ce !== null || d.value)) {
|
|
let le = null;
|
|
F.value ? le = new Date(F.value) : (le = a.timeCreator(), le.setMilliseconds(0)), le.setHours(ae), le.setMinutes(ee), le.setSeconds(q), isNaN(le.getTime()) || (F.value = new Date(le.getTime()));
|
|
}
|
|
}
|
|
function x(ae) {
|
|
const ee = new Date(ae);
|
|
if (!ae || !ee || isNaN(ee.getTime()))
|
|
return null;
|
|
const q = ee.getHours(), Ce = ee.getMinutes(), le = ee.getSeconds();
|
|
return E(q, !0) + ":" + E(Ce, !0) + ":" + E(le, !0);
|
|
}
|
|
function R(ae) {
|
|
S.value !== null && a.resetOnMeridianChange ? (S.value = null, C.value = null, p.value = null, F.value = null) : S.value !== null && (ae === u.value ? S.value += 12 : ae === c.value && (S.value -= 12)), w(
|
|
S.value,
|
|
C.value,
|
|
a.enableSeconds ? p.value : 0,
|
|
ae
|
|
);
|
|
}
|
|
function _(ae) {
|
|
!C.value && typeof a.defaultMinutes < "u" && (C.value = a.defaultMinutes), !p.value && typeof a.defaultSeconds < "u" && (p.value = a.defaultSeconds), w(
|
|
parseInt(ae, 10),
|
|
C.value,
|
|
a.enableSeconds ? p.value : 0,
|
|
V.value
|
|
);
|
|
}
|
|
function N(ae) {
|
|
!p.value && a.defaultSeconds && (p.value = a.defaultSeconds), w(
|
|
S.value,
|
|
parseInt(ae, 10),
|
|
a.enableSeconds ? p.value : 0,
|
|
V.value
|
|
);
|
|
}
|
|
function L(ae) {
|
|
w(
|
|
S.value,
|
|
C.value,
|
|
parseInt(ae, 10),
|
|
V.value
|
|
);
|
|
}
|
|
function H(ae) {
|
|
const ee = a.timeParser(ae, r);
|
|
F.value = ee || null;
|
|
}
|
|
function Q(ae) {
|
|
if (ae) {
|
|
let ee = null;
|
|
F.value ? ee = new Date(F.value) : (ee = a.timeCreator(), ee.setMilliseconds(0));
|
|
const q = ae.split(":");
|
|
ee.setHours(parseInt(q[0], 10)), ee.setMinutes(parseInt(q[1], 10)), ee.setSeconds(q[2] ? parseInt(q[2], 10) : 0), F.value = new Date(ee.getTime());
|
|
} else
|
|
F.value = null;
|
|
}
|
|
const ne = h([
|
|
"selectClasses.selectClass",
|
|
"o-tpck__select"
|
|
]), Ae = h([
|
|
"selectClasses.placeholderClass",
|
|
"o-tpck__select-placeholder"
|
|
]), Pe = n(() => ({
|
|
"select-class": Xe(ne.value),
|
|
"placeholder-class": Xe(Ae.value),
|
|
...a.selectClasses
|
|
})), Re = h(
|
|
["rootClass", "o-tpck"],
|
|
[
|
|
"sizeClass",
|
|
"o-tpck--",
|
|
n(() => a.size),
|
|
n(() => !!a.size)
|
|
],
|
|
["mobileClass", "o-tpck--mobile", null, t]
|
|
), Le = h(["separatorClass", "o-tpck__separtor"]), we = h(["footerClass", "o-tpck__footer"]), je = h([
|
|
"dropdownClasses.rootClass",
|
|
"o-tpck__dropdown"
|
|
]), Je = h(["boxClass", "o-tpck__box"]), Qe = n(() => Xe(Je.value));
|
|
return l({ focus: () => {
|
|
var ae;
|
|
return (ae = b.value) == null ? void 0 : ae.focus();
|
|
} }), (ae, ee) => (f(), ie(_a, {
|
|
ref_key: "pickerRef",
|
|
ref: b,
|
|
active: B.value,
|
|
"onUpdate:active": ee[8] || (ee[8] = (q) => B.value = q),
|
|
"data-oruga": "timepicker",
|
|
value: F.value,
|
|
picker: a,
|
|
"formatted-value": T.value,
|
|
"native-type": "time",
|
|
"native-value": x(F.value),
|
|
"native-max": x(e.maxTime),
|
|
"native-min": x(e.minTime),
|
|
"native-step": I.value,
|
|
"dropdown-classes": s(je),
|
|
"root-classes": s(Re),
|
|
"box-class": Qe.value,
|
|
onChange: H,
|
|
onNativeChange: Q,
|
|
onFocus: ee[9] || (ee[9] = (q) => ae.$emit("focus", q)),
|
|
onBlur: ee[10] || (ee[10] = (q) => ae.$emit("blur", q)),
|
|
onInvalid: ee[11] || (ee[11] = (q) => ae.$emit("invalid", q)),
|
|
onIconClick: ee[12] || (ee[12] = (q) => ae.$emit("icon-click", q)),
|
|
onIconRightClick: ee[13] || (ee[13] = (q) => ae.$emit("icon-right-click", q))
|
|
}, It({
|
|
default: ue(() => [
|
|
me(pt, ye(Pe.value, {
|
|
modelValue: S.value,
|
|
"onUpdate:modelValue": ee[0] || (ee[0] = (q) => S.value = q),
|
|
override: "",
|
|
disabled: e.disabled,
|
|
placeholder: "00",
|
|
onChange: ee[1] || (ee[1] = (q) => _(q.target.value))
|
|
}), {
|
|
default: ue(() => [
|
|
(f(!0), $(ke, null, $e(te.value, (q) => (f(), $("option", {
|
|
key: q.value,
|
|
value: q.value,
|
|
disabled: M(q.value)
|
|
}, ce(q.label), 9, qn))), 128))
|
|
]),
|
|
_: 1
|
|
}, 16, ["modelValue", "disabled"]),
|
|
se("span", {
|
|
class: P(s(Le))
|
|
}, ce(s(v)), 3),
|
|
me(pt, ye(Pe.value, {
|
|
modelValue: C.value,
|
|
"onUpdate:modelValue": ee[2] || (ee[2] = (q) => C.value = q),
|
|
override: "",
|
|
disabled: e.disabled,
|
|
placeholder: "00",
|
|
onChange: ee[3] || (ee[3] = (q) => N(q.target.value))
|
|
}), {
|
|
default: ue(() => [
|
|
(f(!0), $(ke, null, $e(O.value, (q) => (f(), $("option", {
|
|
key: q.value,
|
|
value: q.value,
|
|
disabled: J(q.value)
|
|
}, ce(q.label), 9, Xn))), 128))
|
|
]),
|
|
_: 1
|
|
}, 16, ["modelValue", "disabled"]),
|
|
e.enableSeconds ? (f(), $(ke, { key: 0 }, [
|
|
se("span", {
|
|
class: P(s(Le))
|
|
}, ce(s(m)), 3),
|
|
me(pt, ye(Pe.value, {
|
|
modelValue: p.value,
|
|
"onUpdate:modelValue": ee[4] || (ee[4] = (q) => p.value = q),
|
|
override: "",
|
|
disabled: e.disabled,
|
|
placeholder: "00",
|
|
onChange: ee[5] || (ee[5] = (q) => L(q.target.value))
|
|
}), {
|
|
default: ue(() => [
|
|
(f(!0), $(ke, null, $e(D.value, (q) => (f(), $("option", {
|
|
key: q.value,
|
|
value: q.value,
|
|
disabled: j(q.value)
|
|
}, ce(q.label), 9, Gn))), 128))
|
|
]),
|
|
_: 1
|
|
}, 16, ["modelValue", "disabled"]),
|
|
se("span", {
|
|
class: P(s(Le))
|
|
}, ce(s(k)), 3)
|
|
], 64)) : G("", !0),
|
|
s(d) ? G("", !0) : (f(), ie(pt, ye({ key: 1 }, Pe.value, {
|
|
modelValue: V.value,
|
|
"onUpdate:modelValue": ee[6] || (ee[6] = (q) => V.value = q),
|
|
override: "",
|
|
disabled: e.disabled,
|
|
onChange: ee[7] || (ee[7] = (q) => R(q.target.value))
|
|
}), {
|
|
default: ue(() => [
|
|
(f(!0), $(ke, null, $e(s(y), (q) => (f(), $("option", {
|
|
key: q,
|
|
value: q,
|
|
disabled: g(q)
|
|
}, ce(q), 9, Jn))), 128))
|
|
]),
|
|
_: 1
|
|
}, 16, ["modelValue", "disabled"])),
|
|
ae.$slots.default ? (f(), $("footer", {
|
|
key: 2,
|
|
class: P(s(we))
|
|
}, [
|
|
Z(ae.$slots, "default")
|
|
], 2)) : G("", !0)
|
|
]),
|
|
_: 2
|
|
}, [
|
|
ae.$slots.trigger ? {
|
|
name: "trigger",
|
|
fn: ue(() => [
|
|
Z(ae.$slots, "trigger")
|
|
]),
|
|
key: "0"
|
|
} : void 0
|
|
]), 1032, ["active", "value", "picker", "formatted-value", "native-value", "native-max", "native-min", "native-step", "dropdown-classes", "root-classes", "box-class"]));
|
|
}
|
|
}), la = "AM", na = "PM", Qn = "24", Zn = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "ODatetimepicker",
|
|
configField: "datetimepicker",
|
|
inheritAttrs: !1,
|
|
__name: "Datetimepicker",
|
|
props: /* @__PURE__ */ Be({
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** @model */
|
|
modelValue: { type: Date, default: void 0 },
|
|
/** The active state of the dropdown, use v-model:active to make it two-way binding. */
|
|
active: { type: Boolean, default: !1 },
|
|
/** Define props for the underlying datepicker component */
|
|
datepicker: {
|
|
type: Object,
|
|
default: void 0
|
|
},
|
|
/** Define props for the underlying timepicker component */
|
|
timepicker: {
|
|
type: Object,
|
|
default: void 0
|
|
},
|
|
/** Min date to select */
|
|
minDatetime: { type: Date, default: void 0 },
|
|
/** Max date to select */
|
|
maxDatetime: { type: Date, default: void 0 },
|
|
/**
|
|
* Size of the input control
|
|
* @values small, medium, large
|
|
*/
|
|
size: {
|
|
type: String,
|
|
default: () => i("datetimepicker.size")
|
|
},
|
|
expanded: { type: Boolean, default: !1 },
|
|
/** Makes the input rounded */
|
|
rounded: { type: Boolean, default: !1 },
|
|
/** Input placeholder */
|
|
placeholder: { type: String, default: void 0 },
|
|
/** Same as native input readonly */
|
|
readonly: { type: Boolean, default: !1 },
|
|
/** Same as native disabled */
|
|
disabled: { type: Boolean, default: !1 },
|
|
/** Display datetimepicker inline */
|
|
inline: { type: Boolean, default: !1 },
|
|
/** Open dropdown on focus */
|
|
openOnFocus: {
|
|
type: Boolean,
|
|
default: () => i("datetimepicker.openOnFocus", !0)
|
|
},
|
|
/** Date format locale */
|
|
locale: {
|
|
type: String,
|
|
default: () => i("locale")
|
|
},
|
|
/** Custom function to format a date into a string */
|
|
datetimeFormatter: {
|
|
type: Function,
|
|
default: (e, l) => i("datetimepicker.dateFormatter", l)(e)
|
|
},
|
|
/** Custom function to parse a string into a date */
|
|
datetimeParser: {
|
|
type: Function,
|
|
default: (e, l) => i("datetimepicker.dateParser", l)(e)
|
|
},
|
|
/** Date creator function, default is `new Date()` */
|
|
datetimeCreator: {
|
|
type: Function,
|
|
default: (e) => i(
|
|
"datetimepicker.datetimeCreator",
|
|
(l) => new Date(l)
|
|
)(e)
|
|
},
|
|
/** Dropdown position */
|
|
position: { type: String, default: void 0 },
|
|
/** Enable mobile native input if mobile agent */
|
|
mobileNative: {
|
|
type: Boolean,
|
|
default: () => i("datetimepicker.mobileNative", !0)
|
|
},
|
|
/**
|
|
* Icon pack to use
|
|
* @values mdi, fa, fas and any other custom icon pack
|
|
*/
|
|
iconPack: {
|
|
type: String,
|
|
default: () => i("datetimepicker.iconPack", void 0)
|
|
},
|
|
/** Icon to be shown */
|
|
icon: {
|
|
type: String,
|
|
default: () => i("datetimepicker.icon", void 0)
|
|
},
|
|
/** Icon to be added on the right side */
|
|
iconRight: {
|
|
type: String,
|
|
default: () => i("datetimepicker.iconRight", void 0)
|
|
},
|
|
/** Make the icon right clickable */
|
|
iconRightClickable: { type: Boolean, default: !1 },
|
|
/**
|
|
* Append the component to another part of the DOM.
|
|
* Set `true` to append the component to the body.
|
|
* In addition, any CSS selector string or an actual DOM node can be used.
|
|
*/
|
|
teleport: {
|
|
type: [Boolean, String, Object],
|
|
default: () => i("datetimepicker.teleport", !1)
|
|
},
|
|
/** Enable html 5 native validation */
|
|
useHtml5Validation: {
|
|
type: Boolean,
|
|
default: () => i("useHtml5Validation", !0)
|
|
},
|
|
/** The message which is shown when a validation error occurs */
|
|
validationMessage: { type: String, default: void 0 },
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the Datepicker wrapper */
|
|
datepickerWrapperClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Timepicker wrapper */
|
|
timepickerWrapperClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
}, {
|
|
active: { type: Boolean, default: !1 },
|
|
activeModifiers: {},
|
|
modelValue: { default: void 0 },
|
|
modelModifiers: {}
|
|
}),
|
|
emits: /* @__PURE__ */ Be(["update:modelValue", "update:active", "range-start", "range-end", "change-month", "change-year", "focus", "blur", "invalid", "icon-click", "icon-right-click"], ["update:active", "update:modelValue"]),
|
|
setup(e, { expose: l, emit: a }) {
|
|
const t = e, o = a, r = z(), u = z(), c = z(), y = z(t.timepicker);
|
|
fe(
|
|
() => t.timepicker,
|
|
(H) => y.value = H,
|
|
{ deep: !0 }
|
|
);
|
|
const d = z(t.datepicker);
|
|
fe(
|
|
() => t.datepicker,
|
|
(H) => d.value = H,
|
|
{ deep: !0 }
|
|
);
|
|
const v = n(
|
|
() => t.mobileNative && ft.any()
|
|
), m = n(
|
|
() => v.value ? c.value : r.value
|
|
), { setFocus: k, onBlur: b, onFocus: F, onInvalid: B } = rt(
|
|
m,
|
|
o,
|
|
t
|
|
);
|
|
fe([() => v.value, () => t.inline], () => {
|
|
r.value && r.value.$forceUpdate();
|
|
});
|
|
const S = Ee(e, "active"), C = Ee(e, "modelValue");
|
|
function p(H) {
|
|
if (!H) {
|
|
C.value = void 0;
|
|
return;
|
|
}
|
|
if (Array.isArray(H)) {
|
|
p(H[0]);
|
|
return;
|
|
}
|
|
let Q = new Date(H.getTime());
|
|
t.modelValue ? (H.getDate() !== t.modelValue.getDate() || H.getMonth() !== t.modelValue.getMonth() || H.getFullYear() !== t.modelValue.getFullYear()) && H.getHours() === 0 && H.getMinutes() === 0 && H.getSeconds() === 0 && Q.setHours(
|
|
t.modelValue.getHours(),
|
|
t.modelValue.getMinutes(),
|
|
t.modelValue.getSeconds(),
|
|
0
|
|
) : Q = t.datetimeCreator(H), t.minDatetime && Q < t.minDatetime ? Q = t.minDatetime : t.maxDatetime && Q > t.maxDatetime && (Q = t.maxDatetime), C.value = new Date(Q.getTime());
|
|
}
|
|
const V = n(() => t.minDatetime ? new Date(
|
|
t.minDatetime.getFullYear(),
|
|
t.minDatetime.getMonth(),
|
|
t.minDatetime.getDate(),
|
|
0,
|
|
0,
|
|
0,
|
|
0
|
|
) : d.value ? d.value.minDate : null), T = n(() => t.maxDatetime ? new Date(
|
|
t.maxDatetime.getFullYear(),
|
|
t.maxDatetime.getMonth(),
|
|
t.maxDatetime.getDate(),
|
|
0,
|
|
0,
|
|
0,
|
|
0
|
|
) : d.value ? d.value.maxDate : null), I = n(() => !t.minDatetime || C.value === null || typeof C.value > "u" || C.value.getFullYear() != t.minDatetime.getFullYear() || C.value.getMonth() != t.minDatetime.getMonth() || C.value.getDate() != t.minDatetime.getDate() ? y.value ? y.value.minTime : null : t.minDatetime), E = n(() => !t.maxDatetime || C.value === null || typeof C.value > "u" || C.value.getFullYear() != t.maxDatetime.getFullYear() || C.value.getMonth() != t.maxDatetime.getMonth() || C.value.getDate() != t.maxDatetime.getDate() ? y.value ? y.value.maxTime : null : t.maxDatetime), K = n(
|
|
() => {
|
|
var H;
|
|
return (H = d.value) != null && H.size ? d.value.size : t.size;
|
|
}
|
|
), te = n(
|
|
() => {
|
|
var H;
|
|
return (H = y.value) != null && H.size ? y.value.size : t.size;
|
|
}
|
|
), O = n(
|
|
() => {
|
|
var H;
|
|
return (H = y.value) != null && H.disabled ? y.value.disabled : t.disabled;
|
|
}
|
|
);
|
|
function D(H) {
|
|
const Q = new Date(H);
|
|
if (H && !isNaN(Q.getTime())) {
|
|
const ne = Q.getFullYear(), Ae = Q.getMonth() + 1, Pe = Q.getDate(), Re = Q.getHours(), Le = Q.getMinutes(), we = Q.getSeconds();
|
|
return ne + "-" + ((Ae < 10 ? "0" : "") + Ae) + "-" + ((Pe < 10 ? "0" : "") + Pe) + "T" + ((Re < 10 ? "0" : "") + Re) + ":" + ((Le < 10 ? "0" : "") + Le) + ":" + ((we < 10 ? "0" : "") + we);
|
|
}
|
|
return "";
|
|
}
|
|
const M = n(
|
|
() => {
|
|
var H;
|
|
return (H = u.value) != null && H.enableSeconds ? u.value.enableSeconds : !1;
|
|
}
|
|
), Y = n(
|
|
() => new Intl.DateTimeFormat(t.locale, {
|
|
year: "numeric",
|
|
month: "numeric",
|
|
day: "numeric",
|
|
hour: "numeric",
|
|
minute: "numeric",
|
|
second: M.value ? "numeric" : void 0
|
|
}).resolvedOptions()
|
|
), J = n(
|
|
() => {
|
|
var H, Q;
|
|
return ((H = y.value) == null ? void 0 : H.hourFormat) && y.value.hourFormat === Qn || !((Q = y.value) != null && Q.hourFormat) && !Y.value.hour12;
|
|
}
|
|
), j = n(
|
|
() => new Intl.DateTimeFormat(t.locale, {
|
|
year: Y.value.year || "numeric",
|
|
month: Y.value.month || "numeric",
|
|
day: Y.value.day || "numeric",
|
|
hour: Y.value.hour || "numeric",
|
|
minute: Y.value.minute || "numeric",
|
|
second: M.value ? Y.value.second || "numeric" : void 0,
|
|
hourCycle: J.value ? "h23" : "h12"
|
|
})
|
|
), g = n(() => {
|
|
if (j.value.formatToParts && typeof j.value.formatToParts == "function") {
|
|
const H = t.datetimeCreator(/* @__PURE__ */ new Date());
|
|
H.setHours(10);
|
|
const Q = j.value.formatToParts(H).find((ne) => ne.type === "dayPeriod");
|
|
if (Q)
|
|
return Q.value;
|
|
}
|
|
return la;
|
|
}), w = n(() => {
|
|
if (j.value.formatToParts && typeof j.value.formatToParts == "function") {
|
|
const H = t.datetimeCreator(/* @__PURE__ */ new Date());
|
|
H.setHours(20);
|
|
const Q = j.value.formatToParts(H).find((ne) => ne.type === "dayPeriod");
|
|
if (Q)
|
|
return Q.value;
|
|
}
|
|
return na;
|
|
});
|
|
function x(H) {
|
|
function Q(Ae) {
|
|
if (j.value.formatToParts && typeof j.value.formatToParts == "function") {
|
|
const Pe = [la, na, la.toLowerCase(), na.toLowerCase()];
|
|
u.value && (Pe.push(g.value), Pe.push(w.value));
|
|
const Re = j.value.formatToParts(/* @__PURE__ */ new Date()), Le = Re.map((je, Je) => je.type === "literal" ? Je + 1 < Re.length && Re[Je + 1].type === "hour" ? "[^\\d]+" : je.value.replace(/ /g, "\\s?") : je.type === "dayPeriod" ? `((?!=<${je.type}>)(${Pe.join(
|
|
"|"
|
|
)})?)` : `((?!=<${je.type}>)\\d+)`).join(""), we = pa(Le, Ae);
|
|
if (we.year && we.year.length === 4 && we.month && we.month <= 12 && we.day && we.day <= 31 && we.hour && we.hour >= 0 && we.hour < 24 && we.minute && we.minute >= 0 && we.minute <= 59)
|
|
return new Date(
|
|
we.year,
|
|
we.month - 1,
|
|
we.day,
|
|
we.hour,
|
|
we.minute,
|
|
we.second || 0
|
|
);
|
|
}
|
|
return new Date(Date.parse(Ae));
|
|
}
|
|
return t.datetimeParser(H, Q);
|
|
}
|
|
function R(H) {
|
|
return t.datetimeFormatter(
|
|
H,
|
|
(Q) => Q ? j.value.format(Q) : ""
|
|
);
|
|
}
|
|
function _(H) {
|
|
const Q = H.target.value, ne = Q ? Q.split(/\D/) : [];
|
|
if (ne.length >= 5) {
|
|
const Ae = parseInt(ne[0], 10), Pe = parseInt(ne[1], 10) - 1, Re = parseInt(ne[2], 10), Le = parseInt(ne[3], 10), we = parseInt(ne[4], 10);
|
|
p(new Date(Ae, Pe, Re, Le, we));
|
|
} else
|
|
p(null);
|
|
}
|
|
const N = h([
|
|
"datepickerWrapperClass",
|
|
"o-dtpck__date"
|
|
]), L = h([
|
|
"timepickerWrapperClass",
|
|
"o-dtpck__time"
|
|
]);
|
|
return l({ focus: k }), (H, Q) => !v.value || e.inline ? (f(), ie(el, ye({
|
|
key: 0,
|
|
ref_key: "datepickerRef",
|
|
ref: r
|
|
}, { ...H.$attrs, ...e.datepicker }, {
|
|
active: S.value,
|
|
"onUpdate:active": Q[1] || (Q[1] = (ne) => S.value = ne),
|
|
"model-value": C.value,
|
|
"data-oruga": "datetimepicker",
|
|
class: s(N),
|
|
rounded: e.rounded,
|
|
"open-on-focus": e.openOnFocus,
|
|
position: e.position,
|
|
inline: e.inline,
|
|
readonly: e.readonly,
|
|
expanded: e.expanded,
|
|
"close-on-click": !1,
|
|
"date-formatter": R,
|
|
"date-parser": x,
|
|
"min-date": V.value,
|
|
"max-date": T.value,
|
|
icon: e.icon,
|
|
"icon-right": e.iconRight,
|
|
"icon-right-clickable": e.iconRightClickable,
|
|
"icon-pack": e.iconPack,
|
|
size: K.value,
|
|
placeholder: e.placeholder,
|
|
range: !1,
|
|
disabled: e.disabled,
|
|
"mobile-native": v.value,
|
|
locale: e.locale,
|
|
teleport: e.teleport,
|
|
"onUpdate:modelValue": p,
|
|
onFocus: s(F),
|
|
onBlur: s(b),
|
|
onChangeMonth: Q[2] || (Q[2] = (ne) => H.$emit("change-month", ne)),
|
|
onChangeYear: Q[3] || (Q[3] = (ne) => H.$emit("change-year", ne)),
|
|
onIconClick: Q[4] || (Q[4] = (ne) => H.$emit("icon-click", ne)),
|
|
onIconRightClick: Q[5] || (Q[5] = (ne) => H.$emit("icon-right-click", ne))
|
|
}), {
|
|
footer: ue(() => [
|
|
se("div", {
|
|
class: P(s(L))
|
|
}, [
|
|
me(tl, ye({
|
|
ref_key: "timepickerRef",
|
|
ref: u
|
|
}, e.timepicker, {
|
|
modelValue: C.value,
|
|
"onUpdate:modelValue": Q[0] || (Q[0] = (ne) => C.value = ne),
|
|
inline: "",
|
|
readonly: e.readonly,
|
|
"min-time": I.value,
|
|
"max-time": E.value,
|
|
size: te.value,
|
|
disabled: O.value,
|
|
"mobile-native": v.value,
|
|
locale: e.locale
|
|
}), null, 16, ["modelValue", "readonly", "min-time", "max-time", "size", "disabled", "mobile-native", "locale"])
|
|
], 2),
|
|
H.$slots.footer !== void 0 ? Z(H.$slots, "footer", { key: 0 }) : G("", !0)
|
|
]),
|
|
_: 3
|
|
}, 16, ["active", "model-value", "class", "rounded", "open-on-focus", "position", "inline", "readonly", "expanded", "min-date", "max-date", "icon", "icon-right", "icon-right-clickable", "icon-pack", "size", "placeholder", "disabled", "mobile-native", "locale", "teleport", "onFocus", "onBlur"])) : (f(), ie(Ft, ye({ key: 1 }, H.$attrs, {
|
|
ref_key: "nativeInputRef",
|
|
ref: c,
|
|
type: "datetime-local",
|
|
autocomplete: "off",
|
|
value: D(C.value),
|
|
max: D(T.value),
|
|
min: D(V.value),
|
|
placeholder: e.placeholder,
|
|
size: K.value,
|
|
"icon-pack": e.iconPack,
|
|
icon: e.icon,
|
|
rounded: e.rounded,
|
|
disabled: e.disabled,
|
|
readonly: !1,
|
|
"use-html5-validation": !1,
|
|
onChange: _,
|
|
onFocus: s(F),
|
|
onBlur: s(b),
|
|
onInvalid: s(B)
|
|
}), null, 16, ["value", "max", "min", "placeholder", "size", "icon-pack", "icon", "rounded", "disabled", "onFocus", "onBlur", "onInvalid"]));
|
|
}
|
|
}), _n = {
|
|
install(e) {
|
|
Fe(e, Zn);
|
|
}
|
|
}, eo = {
|
|
install(e) {
|
|
Fe(e, va), Fe(e, Ct);
|
|
}
|
|
}, to = {
|
|
install(e) {
|
|
Fe(e, qa);
|
|
}
|
|
}, ao = {
|
|
install(e) {
|
|
Fe(e, Te);
|
|
}
|
|
}, lo = {
|
|
install(e) {
|
|
Fe(e, Ft);
|
|
}
|
|
}, ya = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OLoading",
|
|
configField: "loading",
|
|
inheritAttrs: !1,
|
|
__name: "Loading",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** Whether loading is active or not, use v-model:active to make it two-way binding. */
|
|
active: { type: Boolean, default: !1 },
|
|
/** Loader will overlay the full page. */
|
|
fullPage: { type: Boolean, default: !0 },
|
|
/** Notification label, unnecessary when default slot is used. */
|
|
label: { type: String, default: void 0 },
|
|
/** Custom animation (transition name) */
|
|
animation: {
|
|
type: String,
|
|
default: () => i("loading.animation", "fade")
|
|
},
|
|
/** Is Loading cancable by pressing escape or clicking outside. */
|
|
cancelable: { type: Boolean, default: !1 },
|
|
/** Callback function to call after user canceled (pressed escape / clicked outside). */
|
|
onCancel: { type: Function, default: () => {
|
|
} },
|
|
/** Callback function to call after close (programmatically close or user canceled). */
|
|
onClose: { type: Function, default: () => {
|
|
} },
|
|
/** Icon name to show, unnecessary when default slot is used. */
|
|
icon: {
|
|
type: String,
|
|
default: () => i("loading.icon", "loading")
|
|
},
|
|
/** Enable spin effect on icon */
|
|
iconSpin: {
|
|
type: Boolean,
|
|
default: () => i("loading.iconSpin", !0)
|
|
},
|
|
/**
|
|
* Icon size
|
|
* @values small, medium, large
|
|
*/
|
|
iconSize: {
|
|
type: String,
|
|
default: () => i("loading.iconSize", "medium")
|
|
},
|
|
/**
|
|
* DOM element where the loading component will be created on (for programmatic usage).
|
|
* Note that this also changes fullPage to false.
|
|
*/
|
|
container: {
|
|
type: [Object, String],
|
|
default: () => i("loading.container", "body")
|
|
},
|
|
/**
|
|
* This is used internally for programmatic usage
|
|
* @ignore
|
|
*/
|
|
programmatic: {
|
|
type: Object,
|
|
default: void 0
|
|
},
|
|
/**
|
|
* This is used internally for programmatic usage.
|
|
* @ignore
|
|
*/
|
|
promise: { type: Promise, default: void 0 },
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class for the root element when fullpage */
|
|
fullPageClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the loading overlay */
|
|
overlayClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class for the loading icon */
|
|
iconClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class for the loading label */
|
|
labelClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
emits: ["update:active", "update:fullPage", "close"],
|
|
setup(e, { expose: l, emit: a }) {
|
|
const t = e, o = a, r = z(), u = st("fullPage", t, o), { isActive: c, close: y, cancel: d } = Xt(
|
|
r,
|
|
t,
|
|
o,
|
|
{
|
|
cancelOptions: ["escape", "outside"]
|
|
}
|
|
);
|
|
it(() => {
|
|
t.programmatic && t.container && (u.value = !1);
|
|
});
|
|
const v = h(
|
|
["rootClass", "o-load"],
|
|
["fullPageClass", "o-load--fullpage", null, u]
|
|
), m = h(["overlayClass", "o-load__overlay"]), k = h(["iconClass", "o-load__icon"]), b = h(["labelClass", "o-load__label"]);
|
|
return l({ close: y, promise: t.promise }), (F, B) => (f(), ie(tt, { name: e.animation }, {
|
|
default: ue(() => [
|
|
s(c) ? (f(), $("div", {
|
|
key: 0,
|
|
ref_key: "rootRef",
|
|
ref: r,
|
|
"data-oruga": "loading",
|
|
role: "dialog",
|
|
class: P(s(v))
|
|
}, [
|
|
se("div", {
|
|
class: P(s(m)),
|
|
tabindex: -1,
|
|
"aria-hidden": "true",
|
|
onClick: B[0] || (B[0] = (S) => s(d)("outside"))
|
|
}, null, 2),
|
|
Z(F.$slots, "default", { close: s(y) }, () => [
|
|
me(Te, {
|
|
icon: e.icon,
|
|
spin: e.iconSpin,
|
|
size: e.iconSize,
|
|
class: P(s(k)),
|
|
both: ""
|
|
}, null, 8, ["icon", "spin", "size", "class"]),
|
|
e.label ? (f(), $("span", {
|
|
key: 0,
|
|
class: P(s(b))
|
|
}, ce(e.label), 3)) : G("", !0)
|
|
])
|
|
], 2)) : G("", !0)
|
|
]),
|
|
_: 3
|
|
}, 8, ["name"]));
|
|
}
|
|
});
|
|
class Gt {
|
|
constructor() {
|
|
Sa(this, "entries");
|
|
this.entries = [];
|
|
}
|
|
add(l) {
|
|
this.entries.push(l);
|
|
}
|
|
remove(l) {
|
|
const a = this.entries.indexOf(l);
|
|
this.entries.splice(a, 1);
|
|
}
|
|
walk(l) {
|
|
this.entries = [...this.entries].filter((a) => l(a) !== !0);
|
|
}
|
|
}
|
|
const xa = new Gt(), no = {
|
|
open(e) {
|
|
const l = typeof e == "string" ? {
|
|
label: e
|
|
} : { ...e };
|
|
let a;
|
|
Array.isArray(l.label) && (a = l.label, delete l.label);
|
|
const o = mt({
|
|
programmatic: { instances: xa },
|
|
active: !0
|
|
// set the active state to true
|
|
}, l);
|
|
o.promise = new Promise((y, d) => {
|
|
o.programmatic.resolve = y, o.programmatic.reject = d;
|
|
});
|
|
const r = () => a, u = zt, c = me(ya, o, r);
|
|
return c.appContext = u._context, Kt(c, document.createElement("div")), c.component.exposed;
|
|
},
|
|
closeAll(...e) {
|
|
xa.walk((l) => l.exposed.close(...e));
|
|
}
|
|
}, oo = no, io = {
|
|
install(e) {
|
|
Fe(e, ya), Ht(e, "loading", oo);
|
|
}
|
|
}, so = ["role"], ro = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OMenu",
|
|
configField: "menu",
|
|
__name: "Menu",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** Menu label */
|
|
label: { type: String, default: void 0 },
|
|
/** If sub menu items are collapsible */
|
|
accordion: { type: Boolean, default: !0 },
|
|
/** If the menu items are clickable */
|
|
activable: { type: Boolean, default: !0 },
|
|
/**
|
|
* Role attribute to be passed to the list container for better accessibility.
|
|
* Use menu only in situations where your dropdown is related to a navigation menu.
|
|
* @values list, menu, dialog
|
|
*/
|
|
ariaRole: {
|
|
type: String,
|
|
default: i("menu.ariaRole", "menu"),
|
|
validator: (e) => ["menu", "list", "dialog"].indexOf(e) > -1
|
|
},
|
|
/** Icon to be shown */
|
|
icon: { type: String, default: void 0 },
|
|
/**
|
|
* Icon pack to use
|
|
* @values mdi, fa, fas and any other custom icon pack
|
|
*/
|
|
iconPack: {
|
|
type: String,
|
|
default: () => i("menu.iconPack")
|
|
},
|
|
/**
|
|
* Icon size
|
|
* @values small, medium, large
|
|
*/
|
|
iconSize: {
|
|
type: String,
|
|
default: () => i("menu.iconSize")
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the menu list */
|
|
listClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the menu list label */
|
|
listLabelClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
setup(e) {
|
|
const l = e, a = z(), t = n(() => ({
|
|
activable: l.activable,
|
|
accordion: l.accordion,
|
|
resetMenu: r
|
|
})), { childItems: o } = gt(a, {
|
|
data: t
|
|
});
|
|
function r(d = []) {
|
|
o.value.forEach((v) => {
|
|
d.map((m) => m == null ? void 0 : m.identifier).includes(v.identifier) || v.data.reset();
|
|
});
|
|
}
|
|
const u = h(["rootClass", "o-menu"]), c = h(["listClass", "o-menu__list"]), y = h(["listLabelClass", "o-menu__label"]);
|
|
return (d, v) => (f(), $("div", {
|
|
ref_key: "rootRef",
|
|
ref: a,
|
|
"data-oruga": "menu",
|
|
class: P(s(u))
|
|
}, [
|
|
e.label || d.$slots.label ? (f(), $("div", {
|
|
key: 0,
|
|
class: P(s(y))
|
|
}, [
|
|
Z(d.$slots, "label", {}, () => [
|
|
e.icon ? (f(), ie(Te, {
|
|
key: 0,
|
|
icon: e.icon,
|
|
pack: e.iconPack,
|
|
size: e.iconSize
|
|
}, null, 8, ["icon", "pack", "size"])) : G("", !0),
|
|
se("span", null, ce(e.label), 1)
|
|
])
|
|
], 2)) : G("", !0),
|
|
se("ul", {
|
|
class: P(s(c)),
|
|
role: e.ariaRole
|
|
}, [
|
|
Z(d.$slots, "default")
|
|
], 10, so)
|
|
], 2));
|
|
}
|
|
}), uo = ["role", "data-id"], co = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OMenuItem",
|
|
configField: "menu",
|
|
inheritAttrs: !1,
|
|
__name: "MenuItem",
|
|
props: /* @__PURE__ */ Be({
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** The active state of the menu item, use v-model:active to make it two-way binding. */
|
|
active: { type: Boolean, default: !1 },
|
|
/** Menu item label */
|
|
label: { type: String, default: void 0 },
|
|
/** Menu item will be expanded */
|
|
expanded: { type: Boolean, default: !1 },
|
|
/** Menu item will be disabled */
|
|
disabled: { type: Boolean, default: !1 },
|
|
/** Icon to be shown */
|
|
icon: { type: String, default: void 0 },
|
|
/**
|
|
* Icon pack to use
|
|
* @values mdi, fa, fas and any other custom icon pack
|
|
*/
|
|
iconPack: {
|
|
type: String,
|
|
default: () => i("menu.iconPack")
|
|
},
|
|
/**
|
|
* Icon size
|
|
* @values small, medium, large
|
|
*/
|
|
iconSize: {
|
|
type: String,
|
|
default: () => i("menu.iconSize")
|
|
},
|
|
/** Transition name to apply on menu list */
|
|
animation: {
|
|
type: String,
|
|
default: () => i("menu.animation", "slide")
|
|
},
|
|
/** Menu item tag name */
|
|
tag: {
|
|
type: [String, Object, Function],
|
|
default: () => i("menu.menuTag", "button")
|
|
},
|
|
/**
|
|
* Role attribute to be passed to the list item for better accessibility.
|
|
* @values listitem, menuitem
|
|
*/
|
|
ariaRole: {
|
|
type: String,
|
|
default: i("menu.itemAriaRole", "menuitem")
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the menu item */
|
|
itemClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the active menu item */
|
|
itemActiveClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the disabled menu item */
|
|
itemDisabledClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the icon of menu item */
|
|
itemIconTextClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the menu item when is a submenu */
|
|
itemSubmenuClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the root element of menu item */
|
|
itemWrapperClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
}, {
|
|
active: { type: Boolean, default: !1 },
|
|
activeModifiers: {},
|
|
expanded: { type: Boolean, default: !1 },
|
|
expandedModifiers: {}
|
|
}),
|
|
emits: /* @__PURE__ */ Be(["update:active", "update:expanded"], ["update:active", "update:expanded"]),
|
|
setup(e) {
|
|
const l = e, a = n(() => ({
|
|
reset: k
|
|
})), { parent: t, item: o } = yt({
|
|
data: a
|
|
}), r = yt({
|
|
key: "menu-item",
|
|
needParent: !1
|
|
}), u = n(() => {
|
|
var p;
|
|
return (p = r.parent) == null ? void 0 : p.value;
|
|
}), c = Ee(e, "active"), y = Ee(e, "expanded"), d = n(
|
|
() => u.value ? `menu-item-${r.item.value.identifier}` : `menu-${o.value.identifier}`
|
|
);
|
|
function v() {
|
|
l.disabled || (m(), t.value.accordion && (y.value = !y.value), t.value.activable && (c.value = !c.value));
|
|
}
|
|
function m(p) {
|
|
var V;
|
|
typeof ((V = u.value) == null ? void 0 : V.triggerReset) == "function" ? u.value.triggerReset(at(o.value)) : typeof t.value.resetMenu == "function" && t.value.resetMenu([at(o.value), p]);
|
|
}
|
|
function k() {
|
|
t.value.accordion && (y.value = !1), t.value.activable && (c.value = !1);
|
|
}
|
|
const b = z(), F = n(() => ({
|
|
triggerReset: m
|
|
}));
|
|
gt(b, { key: "menu-item", data: F });
|
|
const B = h([
|
|
"itemWrapperClass",
|
|
"o-menu__item__wrapper"
|
|
]), S = h(
|
|
["itemClass", "o-menu__item"],
|
|
["itemActiveClass", "o-menu__item--active", null, c],
|
|
[
|
|
"itemDisabledClass",
|
|
"o-menu__item--disabled",
|
|
null,
|
|
n(() => l.disabled)
|
|
],
|
|
[
|
|
"itemIconTextClass",
|
|
"o-menu__item--icon-text",
|
|
null,
|
|
n(() => !!l.icon)
|
|
]
|
|
), C = h([
|
|
"itemSubmenuClass",
|
|
"o-menu__item__submenu"
|
|
]);
|
|
return (p, V) => (f(), $("li", {
|
|
ref_key: "rootRef",
|
|
ref: b,
|
|
role: e.ariaRole,
|
|
class: P(s(B)),
|
|
"data-id": d.value,
|
|
"data-oruga": "menu-item",
|
|
"aria-roledescription": "item"
|
|
}, [
|
|
(f(), ie(Ke(e.tag), ye(p.$attrs, {
|
|
class: s(S),
|
|
role: "button",
|
|
disabled: e.disabled,
|
|
onKeyup: V[0] || (V[0] = he((T) => v(), ["enter"])),
|
|
onClick: V[1] || (V[1] = (T) => v())
|
|
}), {
|
|
default: ue(() => [
|
|
e.icon ? (f(), ie(Te, {
|
|
key: 0,
|
|
icon: e.icon,
|
|
pack: e.iconPack,
|
|
size: e.iconSize
|
|
}, null, 8, ["icon", "pack", "size"])) : G("", !0),
|
|
Z(p.$slots, "label", {
|
|
expanded: y.value,
|
|
active: c.value
|
|
}, () => [
|
|
se("span", null, ce(e.label), 1)
|
|
])
|
|
]),
|
|
_: 3
|
|
}, 16, ["class", "disabled"])),
|
|
p.$slots.default ? (f(), ie(tt, {
|
|
key: 0,
|
|
name: e.animation
|
|
}, {
|
|
default: ue(() => [
|
|
Oe(se("ul", {
|
|
class: P(s(C))
|
|
}, [
|
|
Z(p.$slots, "default")
|
|
], 2), [
|
|
[Ne, y.value]
|
|
])
|
|
]),
|
|
_: 3
|
|
}, 8, ["name"])) : G("", !0)
|
|
], 10, uo));
|
|
}
|
|
}), fo = {
|
|
install(e) {
|
|
Fe(e, ro), Fe(e, co);
|
|
}
|
|
}, vo = ["role", "aria-label", "aria-modal"], po = { key: 0 }, al = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OModal",
|
|
configField: "modal",
|
|
inheritAttrs: !1,
|
|
__name: "Modal",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** Whether modal is active or not, use v-model:active to make it two-way binding */
|
|
active: { type: Boolean, default: !1 },
|
|
/** Display modal as full screen */
|
|
fullScreen: { type: Boolean, default: !1 },
|
|
/** Text content, unnecessary when default slot is used */
|
|
content: { type: String, default: void 0 },
|
|
/** Width of the Modal */
|
|
width: {
|
|
type: [String, Number],
|
|
default: () => i("modal.width", 960)
|
|
},
|
|
/** Custom animation (transition name) */
|
|
animation: {
|
|
type: String,
|
|
default: () => i("modal.animation", "zoom-out")
|
|
},
|
|
/**
|
|
* Is Modal cancleable by clicking 'X', pressing escape or clicking outside
|
|
* @values escape, x, outside, button, true, false
|
|
*/
|
|
cancelable: {
|
|
type: [Array, Boolean],
|
|
default: () => i("modal.cancelable", ["escape", "x", "outside", "button"])
|
|
},
|
|
/** Callback function to call after user canceled (clicked 'X' / pressed escape / clicked outside) */
|
|
onCancel: { type: Function, default: () => {
|
|
} },
|
|
/** Callback function to call after close (programmatically close or user canceled) */
|
|
onClose: { type: Function, default: () => {
|
|
} },
|
|
/**
|
|
* Use `clip` to remove the body scrollbar, `keep` to have a non scrollable scrollbar to avoid shifting background,
|
|
* but will set body to position fixed, might break some layouts.
|
|
* @values keep, clip
|
|
*/
|
|
scroll: {
|
|
type: String,
|
|
default: () => i("modal.scroll", "keep"),
|
|
validator: (e) => ["keep", "clip"].indexOf(e) >= 0
|
|
},
|
|
/** Trap focus inside the modal */
|
|
trapFocus: {
|
|
type: Boolean,
|
|
default: () => i("modal.trapFocus", !0)
|
|
},
|
|
/**
|
|
* Role attribute to be passed to the div wrapper for better accessibility.
|
|
* @values dialog, alertdialog
|
|
*/
|
|
ariaRole: {
|
|
type: String,
|
|
default: () => i("modal.ariaRole"),
|
|
validator: (e) => ["dialog", "alertdialog"].indexOf(e) >= 0
|
|
},
|
|
/** Accessibility aria-label to be passed to the div wrapper element */
|
|
ariaLabel: { type: String, default: () => i("modal.ariaLabel") },
|
|
/** Destroy modal on hide - default `true` for programmatic usage */
|
|
destroyOnHide: {
|
|
type: Boolean,
|
|
default: () => i("modal.destroyOnHide", !1)
|
|
},
|
|
/** Automatically focus modal when active */
|
|
autoFocus: {
|
|
type: Boolean,
|
|
default: () => i("modal.autoFocus", !0)
|
|
},
|
|
/** Close icon name */
|
|
closeIcon: {
|
|
type: String,
|
|
default: () => i("modal.closeIcon", "close")
|
|
},
|
|
/**
|
|
* Size of close icon
|
|
* @values small, medium, large
|
|
*/
|
|
closeIconSize: {
|
|
type: String,
|
|
default: () => i("modal.closeIconSize", "medium")
|
|
},
|
|
/** Mobile breakpoint as max-width value */
|
|
mobileBreakpoint: {
|
|
type: String,
|
|
default: () => i("modal.mobileBreakpoint")
|
|
},
|
|
/**
|
|
* Append the component to another part of the DOM.
|
|
* Set `true` to append the component to the body.
|
|
* In addition, any CSS selector string or an actual DOM node can be used.
|
|
*/
|
|
teleport: {
|
|
type: [Boolean, String, Object],
|
|
default: () => i("modal.teleport", !1)
|
|
},
|
|
/**
|
|
* Component to be injected, used to open a component modal programmatically.
|
|
* Close modal within the component by emitting a 'close' event — emits('close')
|
|
*/
|
|
component: {
|
|
type: [Object, Function],
|
|
default: void 0
|
|
},
|
|
/** Props to be binded to the injected component */
|
|
props: { type: Object, default: void 0 },
|
|
/** Events to be binded to the injected component */
|
|
events: { type: Object, default: () => ({}) },
|
|
/** DOM element where the modal component will be created on (for programmatic usage) */
|
|
container: {
|
|
type: [Object, String],
|
|
default: () => i("modal.container", "body")
|
|
},
|
|
/**
|
|
* This is used internally for programmatic usage
|
|
* @ignore
|
|
*/
|
|
programmatic: {
|
|
type: Object,
|
|
default: void 0
|
|
},
|
|
/**
|
|
* This is used internally for programmatic usage
|
|
* @ignore
|
|
*/
|
|
promise: { type: Promise, default: void 0 },
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of modal component when its active */
|
|
activeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the modal overlay */
|
|
overlayClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the modal content */
|
|
contentClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the close button */
|
|
closeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the modal when fullscreen */
|
|
fullScreenClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of modal component when on mobile */
|
|
mobileClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the modal when scroll is clip */
|
|
scrollClipClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the modal when scroll is not clip */
|
|
noScrollClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
emits: ["update:active", "close"],
|
|
setup(e, { expose: l, emit: a }) {
|
|
const t = e, o = a, r = z(), { isActive: u, close: c, cancel: y } = Xt(
|
|
r,
|
|
t,
|
|
o,
|
|
{
|
|
destroyOnHide: t.destroyOnHide,
|
|
cancelOptions: i("modal.cancelable", [
|
|
"escape",
|
|
"x",
|
|
"outside",
|
|
"button"
|
|
])
|
|
}
|
|
), { isMobile: d } = ct(t.mobileBreakpoint), v = n(
|
|
() => typeof t.teleport == "boolean" ? { to: "body", disabled: !t.teleport } : { to: t.teleport, disabled: !1 }
|
|
), m = z(null), k = z(!t.active);
|
|
fe(u, (O) => {
|
|
B(), O && r.value && t.autoFocus && xe(() => r.value.focus()), !O && t.destroyOnHide && setTimeout(() => oa(r.value));
|
|
});
|
|
const b = n(
|
|
() => Array.isArray(t.cancelable) ? t.cancelable.indexOf("x") >= 0 : t.cancelable
|
|
), F = n(
|
|
() => t.fullScreen ? null : { maxWidth: St(t.width) }
|
|
);
|
|
Tt(() => {
|
|
if (Me) {
|
|
const O = m.value ? m.value : document.documentElement.scrollTop;
|
|
te.value && (document.body.classList.remove(...te.value), document.documentElement.classList.remove(...te.value)), document.documentElement.scrollTop = O, document.body.style.top = null;
|
|
}
|
|
});
|
|
function B() {
|
|
if (Me) {
|
|
if (t.scroll === "clip") {
|
|
te.value && (u.value ? document.documentElement.classList.add(...te.value) : document.documentElement.classList.remove(...te.value));
|
|
return;
|
|
}
|
|
if (m.value = m.value ? m.value : document.documentElement.scrollTop, te.value && (u.value ? document.body.classList.add(...te.value) : document.body.classList.remove(...te.value)), u.value) {
|
|
document.body.style.top = `-${m.value}px`;
|
|
return;
|
|
}
|
|
document.documentElement.scrollTop = m.value, document.body.style.top = null, m.value = null;
|
|
}
|
|
}
|
|
function S() {
|
|
k.value = !1;
|
|
}
|
|
function C() {
|
|
k.value = !0;
|
|
}
|
|
const p = h(
|
|
["rootClass", "o-modal"],
|
|
["mobileClass", "o-modal--mobile", null, d],
|
|
["activeClass", "o-modal--active", null, u]
|
|
), V = h(["overlayClass", "o-modal__overlay"]), T = h(
|
|
["contentClass", "o-modal__content"],
|
|
[
|
|
"fullScreenClass",
|
|
"o-modal__content--full-screen",
|
|
null,
|
|
n(() => t.fullScreen)
|
|
]
|
|
), I = h(["closeClass", "o-modal__close"]), E = h(["scrollClipClass", "o-clipped"]), K = h(["noScrollClass", "o-noscroll"]), te = n(
|
|
() => Xe(
|
|
t.scroll === "clip" ? E.value : K.value
|
|
)
|
|
);
|
|
return te.value, l({ close: c, promise: t.promise }), (O, D) => (f(), ie(ua, {
|
|
to: v.value.to,
|
|
disabled: v.value.disabled
|
|
}, [
|
|
me(tt, {
|
|
name: e.animation,
|
|
onAfterEnter: S,
|
|
onBeforeLeave: C
|
|
}, {
|
|
default: ue(() => [
|
|
Oe((f(), $("div", ye(O.$attrs, {
|
|
ref_key: "rootRef",
|
|
ref: r,
|
|
"data-oruga": "modal",
|
|
class: s(p),
|
|
tabindex: -1,
|
|
role: e.ariaRole,
|
|
"aria-label": e.ariaLabel,
|
|
"aria-modal": s(u)
|
|
}), [
|
|
se("div", {
|
|
class: P(s(V)),
|
|
tabindex: "-1",
|
|
"aria-hidden": "true",
|
|
onClick: D[0] || (D[0] = (M) => s(y)("outside"))
|
|
}, null, 2),
|
|
se("div", {
|
|
class: P(s(T)),
|
|
style: et(F.value)
|
|
}, [
|
|
e.component ? (f(), ie(Ke(e.component), ye({ key: 0 }, O.$props.props, ca(O.$props.events), { onClose: s(c) }), null, 16, ["onClose"])) : Z(O.$slots, "default", {
|
|
key: 1,
|
|
close: s(c)
|
|
}, () => [
|
|
e.content ? (f(), $("div", po, ce(e.content), 1)) : G("", !0)
|
|
]),
|
|
b.value ? Oe((f(), ie(Te, {
|
|
key: 2,
|
|
clickable: "",
|
|
both: "",
|
|
class: P(s(I)),
|
|
icon: e.closeIcon,
|
|
size: e.closeIconSize,
|
|
onClick: D[1] || (D[1] = (M) => s(y)("x"))
|
|
}, null, 8, ["class", "icon", "size"])), [
|
|
[Ne, !k.value]
|
|
]) : G("", !0)
|
|
], 6)
|
|
], 16, vo)), [
|
|
[Ne, s(u)],
|
|
[s(Ja), e.trapFocus]
|
|
])
|
|
]),
|
|
_: 3
|
|
}, 8, ["name"])
|
|
], 8, ["to", "disabled"]));
|
|
}
|
|
}), $a = new Gt(), mo = {
|
|
open(e) {
|
|
const l = typeof e == "string" ? {
|
|
content: e
|
|
} : { ...e };
|
|
let a;
|
|
Array.isArray(l.content) && (a = l.content, delete l.content);
|
|
const o = mt({
|
|
programmatic: { instances: $a },
|
|
active: !0,
|
|
// set the active state to true
|
|
destroyOnHide: !0
|
|
// set destroy on hide true
|
|
}, l);
|
|
o.promise = new Promise((y, d) => {
|
|
o.programmatic.resolve = y, o.programmatic.reject = d;
|
|
});
|
|
const r = () => a, u = zt, c = me(al, o, r);
|
|
return c.appContext = u._context, Kt(c, document.createElement("div")), c.component.exposed;
|
|
},
|
|
closeAll(...e) {
|
|
$a.walk((l) => l.exposed.close(...e));
|
|
}
|
|
}, yo = mo, go = {
|
|
install(e) {
|
|
Fe(e, al), Ht(e, "modal", yo);
|
|
}
|
|
}, bo = ["aria-label"], Co = ["innerHTML"], ho = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "ONotification",
|
|
configField: "notification",
|
|
inheritAttrs: !1,
|
|
__name: "Notification",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** Whether modal is active or not, use v-model:active to make it two-way binding */
|
|
active: { type: Boolean, default: !0 },
|
|
/**
|
|
* Type (color) of the notification
|
|
* @values info, success, warning, danger
|
|
*/
|
|
type: {
|
|
type: String,
|
|
default: void 0,
|
|
validator: (e) => ["info", "success", "warning", "danger", void 0].indexOf(e) > -1
|
|
},
|
|
/**
|
|
* Color of the control
|
|
* @values primary, info, success, warning, danger, and any other custom color
|
|
*/
|
|
variant: {
|
|
type: String,
|
|
default: () => i("notification.variant")
|
|
},
|
|
/**
|
|
* Which position the notification will appear when programmatically
|
|
* @values top-right, top, top-left, bottom-right, bottom, bottom-left
|
|
*/
|
|
position: {
|
|
type: String,
|
|
default: () => i("notification.position", "top"),
|
|
validator: (e) => [
|
|
"top-right",
|
|
"top",
|
|
"top-left",
|
|
"bottom-right",
|
|
"bottom",
|
|
"bottom-left"
|
|
].indexOf(e) > -1
|
|
},
|
|
/** Message text (can contain HTML), unnecessary when default slot is used */
|
|
message: {
|
|
type: [String, Array],
|
|
default: void 0
|
|
},
|
|
/** Custom animation (transition name) */
|
|
animation: {
|
|
type: String,
|
|
default: () => i("notification.animation", "fade")
|
|
},
|
|
/** Accessibility label for the close button */
|
|
ariaCloseLabel: {
|
|
type: String,
|
|
default: () => i("notification.ariaCloseLabel", "Close")
|
|
},
|
|
/**
|
|
* Icon pack to use
|
|
* @values mdi, fa, fas and any other custom icon pack
|
|
*/
|
|
iconPack: {
|
|
type: String,
|
|
default: () => i("notification.iconPack")
|
|
},
|
|
/** Icon name to use */
|
|
icon: { type: String, default: void 0 },
|
|
/**
|
|
* Icon size
|
|
* @values small, medium, large
|
|
*/
|
|
iconSize: {
|
|
type: String,
|
|
default: () => i("notification.iconSize", "large")
|
|
},
|
|
/** Add close button to the item that closes the notification */
|
|
closable: { type: Boolean, default: !1 },
|
|
/** Close icon name */
|
|
closeIcon: {
|
|
type: String,
|
|
default: () => i("notification.closeIcon", "close")
|
|
},
|
|
/**
|
|
* Size of close icon
|
|
* @values small, medium, large
|
|
*/
|
|
closeIconSize: {
|
|
type: String,
|
|
default: () => i("notification.closeIconSize")
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the close button container */
|
|
closeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the content element */
|
|
contentClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the icon on the left */
|
|
iconClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the element when positioned */
|
|
positionClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the notification variant */
|
|
variantClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the wrapper element */
|
|
wrapperClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
emits: ["update:active", "close"],
|
|
setup(e, { emit: l }) {
|
|
const a = e, t = l, o = st("active", a, t, {
|
|
passive: !0
|
|
}), r = n(() => {
|
|
if (a.icon)
|
|
return a.icon;
|
|
switch (a.type) {
|
|
case "info":
|
|
return "information";
|
|
case "success":
|
|
return "check-circle";
|
|
case "warning":
|
|
return "alert";
|
|
case "danger":
|
|
return "alert-circle";
|
|
default:
|
|
return null;
|
|
}
|
|
});
|
|
function u(...k) {
|
|
o.value = !1, t("close", ...k);
|
|
}
|
|
const c = h(
|
|
["rootClass", "o-notification"],
|
|
[
|
|
"variantClass",
|
|
"o-notification--",
|
|
n(() => a.variant),
|
|
n(() => !!a.variant)
|
|
],
|
|
[
|
|
"positionClass",
|
|
"o-notification--",
|
|
n(() => a.position),
|
|
n(() => !!a.position)
|
|
]
|
|
), y = h([
|
|
"wrapperClass",
|
|
"o-notification__wrapper"
|
|
]), d = h(["iconClass", "o-notification__icon"]), v = h([
|
|
"contentClass",
|
|
"o-notification__content"
|
|
]), m = h(["closeClass", "o-notification__close"]);
|
|
return (k, b) => (f(), ie(tt, { name: e.animation }, {
|
|
default: ue(() => [
|
|
Oe(se("article", ye(k.$attrs, {
|
|
class: s(c),
|
|
"data-oruga": "notification"
|
|
}), [
|
|
e.closable ? (f(), $("button", {
|
|
key: 0,
|
|
class: P(s(m)),
|
|
type: "button",
|
|
"aria-label": e.ariaCloseLabel,
|
|
onClick: b[0] || (b[0] = (F) => u({ action: "close", method: "x" }))
|
|
}, [
|
|
me(Te, {
|
|
clickable: "",
|
|
pack: e.iconPack,
|
|
both: "",
|
|
icon: e.closeIcon,
|
|
size: e.closeIconSize
|
|
}, null, 8, ["pack", "icon", "size"])
|
|
], 10, bo)) : G("", !0),
|
|
Z(k.$slots, "inner", { close: u }),
|
|
k.$slots.default || e.message ? (f(), $("div", {
|
|
key: 1,
|
|
class: P(s(y))
|
|
}, [
|
|
r.value ? (f(), ie(Te, {
|
|
key: 0,
|
|
icon: r.value,
|
|
pack: e.iconPack,
|
|
class: P(s(d)),
|
|
both: "",
|
|
size: e.iconSize,
|
|
"aria-hidden": ""
|
|
}, null, 8, ["icon", "pack", "class", "size"])) : G("", !0),
|
|
se("div", {
|
|
class: P(s(v))
|
|
}, [
|
|
Z(k.$slots, "default", { close: u }, () => [
|
|
e.message ? (f(), $("span", {
|
|
key: 0,
|
|
innerHTML: e.message
|
|
}, null, 8, Co)) : G("", !0)
|
|
])
|
|
], 2)
|
|
], 2)) : G("", !0)
|
|
], 16), [
|
|
[Ne, s(o)]
|
|
])
|
|
]),
|
|
_: 3
|
|
}, 8, ["name"]));
|
|
}
|
|
}), ko = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "ONotificationNotice",
|
|
configField: "notification",
|
|
inheritAttrs: !1,
|
|
__name: "NotificationNotice",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** Whether notification is active or not, use v-model:active to make it two-way binding. */
|
|
active: { type: Boolean, default: !0 },
|
|
/**
|
|
* Which position the notification will appear when programmatically.
|
|
* @values top-right, top, top-left, bottom-right, bottom, bottom-left
|
|
*/
|
|
position: {
|
|
type: String,
|
|
default: () => i("notification.position", "top"),
|
|
validator: (e) => [
|
|
"top-right",
|
|
"top",
|
|
"top-left",
|
|
"bottom-right",
|
|
"bottom",
|
|
"bottom-left"
|
|
].indexOf(e) > -1
|
|
},
|
|
/** Hide notification after duration (in miliseconds) */
|
|
duration: {
|
|
type: Number,
|
|
default: () => i("notification.duration", 2e3)
|
|
},
|
|
/** Show the Notification infinitely until it is dismissed. */
|
|
infinite: { type: Boolean, default: !1 },
|
|
/** If notice should queue with others notices (snackbar/toast/notification). */
|
|
queue: {
|
|
type: Boolean,
|
|
default: () => i("notification.queue")
|
|
},
|
|
/** Callback function to call after user canceled (pressed escape / clicked outside). */
|
|
onCancel: { type: Function, default: () => {
|
|
} },
|
|
/** Callback function to call after close (programmatically close or user canceled). */
|
|
onClose: { type: Function, default: () => {
|
|
} },
|
|
/**
|
|
* Component to be injected.
|
|
* Close notification within the component by emitting a 'close' event — $emit('close').
|
|
*/
|
|
component: {
|
|
type: [Object, Function],
|
|
default: void 0
|
|
},
|
|
/** Props to be binded to the injected component. */
|
|
props: { type: Object, default: void 0 },
|
|
/** Events to be binded to the injected component. */
|
|
events: { type: Object, default: () => ({}) },
|
|
/**
|
|
* DOM element the toast will be created on (for programmatic usage).
|
|
* Note that this also changes the position of the toast from fixed to absolute.
|
|
* Meaning that the container should be fixed.
|
|
*/
|
|
container: {
|
|
type: [Object, String],
|
|
default: () => i("notification.container", "body")
|
|
},
|
|
/**
|
|
* Props passed to the internal notification component.
|
|
* @ignore
|
|
*/
|
|
notification: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
/**
|
|
* This is used internally for programmatic usage.
|
|
* @ignore
|
|
*/
|
|
programmatic: {
|
|
type: Object,
|
|
default: void 0
|
|
},
|
|
/**
|
|
* This is used internally for programmatic usage.
|
|
* @ignore
|
|
*/
|
|
promise: { type: Promise, default: void 0 },
|
|
// class props (will not be displayed in the docs)
|
|
/** Root class of the notice */
|
|
noticeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the notice when positioned */
|
|
noticePositionClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the custom container element */
|
|
noticeCustomContainerClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
emits: ["update:active", "close"],
|
|
setup(e, { expose: l, emit: a }) {
|
|
const t = e, o = a, r = z(), { isActive: u, close: c, container: y } = Xt(
|
|
() => r.value.$el,
|
|
t,
|
|
o,
|
|
{
|
|
cancelOptions: ["escape", "x"]
|
|
}
|
|
), d = z(null), v = z(null), m = z();
|
|
fe(
|
|
() => u,
|
|
(I) => {
|
|
I ? B() : m.value && clearTimeout(m.value);
|
|
}
|
|
), Rl(() => {
|
|
if (C.value && V.value && p.value) {
|
|
const I = Xe(C.value), E = Xe(p.value), K = Xe(V.value);
|
|
if (d.value = y.value.querySelector(
|
|
`.${I.join(".")}.${E.join(".")}`
|
|
), v.value = y.value.querySelector(
|
|
`.${I.join(".")}.${K.join(".")}`
|
|
), d.value && v.value)
|
|
return;
|
|
if (d.value || (d.value = document.createElement("div"), d.value.className = `${I.join(
|
|
" "
|
|
)} ${E.join(" ")}`), v.value || (v.value = document.createElement("div"), v.value.className = `${I.join(
|
|
" "
|
|
)} ${K.join(" ")}`), y.value.appendChild(d.value), y.value.appendChild(v.value), y.value.tagName !== "BODY") {
|
|
const te = Xe(
|
|
T.value
|
|
);
|
|
te != null && te.length && te.filter((O) => !!O).forEach((O) => {
|
|
d.value.classList.add(O), v.value.classList.add(O);
|
|
});
|
|
}
|
|
}
|
|
}), it(() => {
|
|
F(), B();
|
|
});
|
|
const k = n(() => {
|
|
switch (t.position) {
|
|
case "top-right":
|
|
case "top":
|
|
case "top-left":
|
|
return d.value;
|
|
case "bottom-right":
|
|
case "bottom":
|
|
case "bottom-left":
|
|
return v.value;
|
|
default:
|
|
return null;
|
|
}
|
|
}), b = n(
|
|
() => t.queue ? d.value.childElementCount > 0 || v.value.childElementCount > 0 : !1
|
|
);
|
|
function F() {
|
|
b.value && (k.value.innerHTML = ""), k.value.insertAdjacentElement(
|
|
"afterbegin",
|
|
r.value.$el
|
|
), u.value = !0;
|
|
}
|
|
function B() {
|
|
t.infinite || (m.value && clearTimeout(m.value), m.value = setTimeout(() => {
|
|
u.value && S({ action: "close", method: "timeout" });
|
|
}, t.duration));
|
|
}
|
|
function S(...I) {
|
|
clearTimeout(m.value), c(...I);
|
|
}
|
|
const C = h(["noticeClass", "o-notices"]), p = h([
|
|
"noticePositionClass",
|
|
"o-notices--",
|
|
"top"
|
|
]), V = h([
|
|
"noticePositionClass",
|
|
"o-notices--",
|
|
"bottom"
|
|
]), T = h([
|
|
"noticeCustomContainerClass",
|
|
"o-notices__custom-container"
|
|
]);
|
|
return l({ close: S, promise: t.promise }), (I, E) => {
|
|
const K = Ta("o-notification");
|
|
return f(), ie(K, ye(e.notification, {
|
|
ref_key: "notificationRef",
|
|
ref: r,
|
|
active: s(u),
|
|
"onUpdate:active": E[0] || (E[0] = (te) => dt(u) ? u.value = te : null),
|
|
position: e.position,
|
|
onClose: S
|
|
}), {
|
|
inner: ue(({ close: te }) => [
|
|
e.component ? (f(), ie(Ke(e.component), ye({ key: 0 }, I.$props.props, ca(I.$props.events), { onClose: te }), null, 16, ["onClose"])) : G("", !0)
|
|
]),
|
|
default: ue(() => [
|
|
Z(I.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 16, ["active", "position"]);
|
|
};
|
|
}
|
|
}), Ba = new Gt(), So = {
|
|
open(e) {
|
|
const l = typeof e == "string" ? {
|
|
message: e
|
|
} : { ...e };
|
|
let a;
|
|
Array.isArray(l.message) && (a = l.message, delete l.message);
|
|
const t = {
|
|
programmatic: { instances: Ba },
|
|
active: !0,
|
|
// set the active state to true
|
|
position: i("notification.position", "top-right")
|
|
}, o = l.notification ? l.notification : l, r = mt(t, l);
|
|
r.notification = mt({}, o), r.promise = new Promise((d, v) => {
|
|
r.programmatic.resolve = d, r.programmatic.reject = v;
|
|
});
|
|
const u = () => a, c = zt, y = me(ko, r, u);
|
|
return y.appContext = c._context, Kt(y, document.createElement("div")), y.component.exposed;
|
|
},
|
|
closeAll(...e) {
|
|
Ba.walk((l) => l.exposed.close(...e));
|
|
}
|
|
}, Fo = So, Ao = {
|
|
install(e) {
|
|
Fe(e, ho), Ht(
|
|
e,
|
|
"notification",
|
|
Fo
|
|
);
|
|
}
|
|
}, Ot = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OPaginationButton",
|
|
configField: "pagination",
|
|
__name: "PaginationButton",
|
|
props: {
|
|
number: { type: Number, default: void 0 },
|
|
isCurrent: { type: Boolean, default: !1 },
|
|
click: {
|
|
type: Function,
|
|
required: !0
|
|
},
|
|
ariaLabel: { type: String, default: void 0 },
|
|
disabled: { type: Boolean, default: !1 },
|
|
tag: {
|
|
type: [String, Object, Function],
|
|
default: "button"
|
|
},
|
|
class: { type: String, default: void 0 },
|
|
linkClass: {
|
|
type: Array,
|
|
required: !0
|
|
},
|
|
linkCurrentClass: {
|
|
type: Array,
|
|
required: !0
|
|
}
|
|
},
|
|
setup(e) {
|
|
const l = e, a = n(() => [
|
|
...l.linkClass,
|
|
l.class,
|
|
...l.isCurrent ? l.linkCurrentClass : []
|
|
]);
|
|
return (t, o) => (f(), ie(Ke(e.tag), ye({
|
|
role: "button",
|
|
tabindex: e.disabled ? null : 0,
|
|
disabled: e.disabled,
|
|
class: a.value
|
|
}, t.$attrs, {
|
|
"aria-label": e.ariaLabel,
|
|
"aria-current": e.isCurrent,
|
|
onClick: ve(e.click, ["prevent"]),
|
|
onKeydown: he(ve(e.click, ["prevent"]), ["enter"])
|
|
}), {
|
|
default: ue(() => [
|
|
Z(t.$slots, "default", {}, () => [
|
|
Ve(ce(e.number), 1)
|
|
])
|
|
]),
|
|
_: 3
|
|
}, 16, ["tabindex", "disabled", "class", "aria-label", "aria-current", "onClick", "onKeydown"]));
|
|
}
|
|
}), ll = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OPagination",
|
|
configField: "pagination",
|
|
inheritAttrs: !1,
|
|
__name: "Pagination",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** Total count of items */
|
|
total: { type: Number, default: void 0 },
|
|
/** Items count for each page */
|
|
perPage: {
|
|
type: [Number, String],
|
|
default: () => i("pagination.perPage", 20)
|
|
},
|
|
/** Current page number, use v-model:current to make it two-way binding. */
|
|
current: { type: Number, default: 1 },
|
|
/** Number of pagination items to show before current page. */
|
|
rangeBefore: { type: Number, default: 1 },
|
|
/** Number of pagination items to show after current page. */
|
|
rangeAfter: { type: Number, default: 1 },
|
|
/**
|
|
* Pagination size
|
|
* @values small, medium, large
|
|
*/
|
|
size: {
|
|
type: String,
|
|
default: () => i("pagination.size")
|
|
},
|
|
/** Simple style */
|
|
simple: {
|
|
type: Boolean,
|
|
default: () => i("pagination.simple", !1)
|
|
},
|
|
/** Rounded button style */
|
|
rounded: {
|
|
type: Boolean,
|
|
default: () => i("pagination.rounded", !1)
|
|
},
|
|
/**
|
|
* Buttons order
|
|
* @values centered, right, left
|
|
*/
|
|
order: {
|
|
type: String,
|
|
default: () => i("pagination.order", "right"),
|
|
validator: (e) => ["centered", "right", "left"].indexOf(e) >= 0
|
|
},
|
|
/** Pagination button tag name */
|
|
buttonTag: {
|
|
type: [String, Object, Function],
|
|
default: () => i("pagination.buttonTag", "button")
|
|
},
|
|
/**
|
|
* Icon pack to use
|
|
* @values mdi, fa, fas and any other custom icon pack
|
|
*/
|
|
iconPack: {
|
|
type: String,
|
|
default: () => i("pagination.iconPack")
|
|
},
|
|
/** Icon to use for previous button */
|
|
iconPrev: {
|
|
type: String,
|
|
default: () => i("pagination.iconPrev", "chevron-left")
|
|
},
|
|
/** Icon to use for next button */
|
|
iconNext: {
|
|
type: String,
|
|
default: () => i("pagination.iconNext", "chevron-right")
|
|
},
|
|
/** Mobile breakpoint as max-width value */
|
|
mobileBreakpoint: {
|
|
type: String,
|
|
default: () => i("pagination.mobileBreakpoint")
|
|
},
|
|
/** Accessibility label for the next page button. */
|
|
ariaNextLabel: {
|
|
type: String,
|
|
default: () => i("pagination.ariaNextLabel", "Next page")
|
|
},
|
|
/** Accessibility label for the previous page button. */
|
|
ariaPreviousLabel: {
|
|
type: String,
|
|
default: () => i("pagination.ariaPreviousLabel", "Previous page")
|
|
},
|
|
/** Accessibility label for the page button. */
|
|
ariaPageLabel: {
|
|
type: String,
|
|
default: () => i("pagination.ariaPageLabel", "page")
|
|
},
|
|
/** Accessibility label for the current page button. */
|
|
ariaCurrentLabel: {
|
|
type: String,
|
|
default: () => i("pagination.ariaCurrentLabel", "Current page")
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the prev button */
|
|
prevButtonClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the next button */
|
|
nextButtonClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the pagination list */
|
|
listClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the pagination list items */
|
|
listItemClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the link button */
|
|
linkClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the current link */
|
|
linkCurrentClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the pagination ellipsis */
|
|
ellipsisClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the info in `simple` mode */
|
|
infoClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the pagination order */
|
|
orderClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the pagination in `simple` mode */
|
|
simpleClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the pagination when rounded */
|
|
roundedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the disabled link */
|
|
linkDisabledClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class for the pagination size */
|
|
sizeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of pagination component when on mobile */
|
|
mobileClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
emits: ["update:current", "change"],
|
|
setup(e, { expose: l, emit: a }) {
|
|
const t = e, o = a, { isMobile: r } = ct(t.mobileBreakpoint), u = st("current", t, o), c = n(
|
|
() => Math.ceil(t.total / Number(t.perPage))
|
|
);
|
|
fe(
|
|
() => c.value,
|
|
(w) => {
|
|
t.current > w && I();
|
|
}
|
|
);
|
|
const y = n(() => {
|
|
const w = Number(t.perPage), x = t.current * w - w + 1;
|
|
return x >= 0 ? x : 0;
|
|
}), d = n(() => t.current > 1), v = n(() => t.current >= 2 + t.rangeBefore), m = n(() => t.current >= t.rangeBefore + 4), k = n(
|
|
() => t.current <= c.value - (1 + t.rangeAfter)
|
|
), b = n(
|
|
() => t.current < c.value - (2 + t.rangeAfter)
|
|
), F = n(() => t.current < c.value), B = n(() => {
|
|
if (t.simple)
|
|
return;
|
|
let w = Math.max(1, t.current - t.rangeBefore);
|
|
w - 1 === 2 && w--;
|
|
let x = Math.min(t.current + t.rangeAfter, c.value);
|
|
c.value - x === 2 && x++;
|
|
const R = [];
|
|
for (let _ = w; _ <= x; _++)
|
|
R.push(S(_));
|
|
return R;
|
|
});
|
|
function S(w, x) {
|
|
return {
|
|
number: w,
|
|
isCurrent: t.current === w,
|
|
click: (R) => E(w, R),
|
|
ariaLabel: x || C(w, t.current === w),
|
|
tag: t.buttonTag
|
|
};
|
|
}
|
|
function C(w, x) {
|
|
return t.ariaPageLabel && (!x || !t.ariaCurrentLabel) ? t.ariaPageLabel + " " + w + "." : t.ariaPageLabel && x && t.ariaCurrentLabel ? t.ariaCurrentLabel + ", " + t.ariaPageLabel + " " + w + "." : null;
|
|
}
|
|
function p(w) {
|
|
E(t.current - 1, w);
|
|
}
|
|
function V(w) {
|
|
E(t.current + 1, w);
|
|
}
|
|
function T(w) {
|
|
E(1, w);
|
|
}
|
|
function I(w) {
|
|
E(c.value, w);
|
|
}
|
|
function E(w, x) {
|
|
t.current === w || w < 1 || w > c.value || (o("change", w), u.value = w, x && x.target && xe(() => x.target.focus()));
|
|
}
|
|
const K = h(
|
|
["rootClass", "o-pag"],
|
|
[
|
|
"orderClass",
|
|
"o-pag--",
|
|
n(() => t.order),
|
|
n(() => !!t.order)
|
|
],
|
|
[
|
|
"sizeClass",
|
|
"o-pag--",
|
|
n(() => t.size),
|
|
n(() => !!t.size)
|
|
],
|
|
["simpleClass", "o-pag--simple", null, n(() => t.simple)],
|
|
["mobileClass", "o-pag--mobile", null, r]
|
|
), te = h(
|
|
["prevButtonClass", "o-pag__previous"],
|
|
[
|
|
"linkDisabledClass",
|
|
"o-pag__link--disabled",
|
|
null,
|
|
n(() => !d.value)
|
|
]
|
|
), O = h(
|
|
["nextButtonClass", "o-pag__next"],
|
|
[
|
|
"linkDisabledClass",
|
|
"o-pag__link--disabled",
|
|
null,
|
|
n(() => !F.value)
|
|
]
|
|
), D = h(["infoClass", "o-pag__info"]), M = h(["ellipsisClass", "o-pag__ellipsis"]), Y = h(["listClass", "o-pag__list"]), J = h(
|
|
["linkClass", "o-pag__link"],
|
|
[
|
|
"roundedClass",
|
|
"o-pag__link--rounded",
|
|
null,
|
|
n(() => t.rounded)
|
|
]
|
|
), j = h([
|
|
"linkCurrentClass",
|
|
"o-pag__link--current"
|
|
]), g = h(["listItemClass", "o-pag__item"]);
|
|
return l({ last: I, first: T, prev: p, next: V }), (w, x) => (f(), $("nav", {
|
|
class: P(s(K)),
|
|
"data-oruga": "pagination"
|
|
}, [
|
|
Z(w.$slots, "previous", $t(Bt(S(s(u) - 1, e.ariaPreviousLabel))), () => [
|
|
me(Ot, ye(S(s(u) - 1, e.ariaPreviousLabel), {
|
|
class: s(te),
|
|
"link-class": s(J),
|
|
"link-current-class": s(j)
|
|
}), {
|
|
default: ue(() => [
|
|
me(Te, {
|
|
icon: e.iconPrev,
|
|
pack: e.iconPack,
|
|
both: "",
|
|
"aria-hidden": "true"
|
|
}, null, 8, ["icon", "pack"])
|
|
]),
|
|
_: 1
|
|
}, 16, ["class", "link-class", "link-current-class"])
|
|
]),
|
|
Z(w.$slots, "next", $t(Bt(S(s(u) + 1, e.ariaNextLabel))), () => [
|
|
me(Ot, ye(S(s(u) + 1, e.ariaNextLabel), {
|
|
class: s(O),
|
|
"link-class": s(J),
|
|
"link-current-class": s(j)
|
|
}), {
|
|
default: ue(() => [
|
|
me(Te, {
|
|
icon: e.iconNext,
|
|
pack: e.iconPack,
|
|
both: "",
|
|
"aria-hidden": "true"
|
|
}, null, 8, ["icon", "pack"])
|
|
]),
|
|
_: 1
|
|
}, 16, ["class", "link-class", "link-current-class"])
|
|
]),
|
|
e.simple ? (f(), $("small", {
|
|
key: 0,
|
|
class: P(s(D))
|
|
}, [
|
|
e.perPage == 1 ? (f(), $(ke, { key: 0 }, [
|
|
Ve(ce(y.value) + " / " + ce(e.total), 1)
|
|
], 64)) : (f(), $(ke, { key: 1 }, [
|
|
Ve(ce(y.value) + "-" + ce(Math.min(s(u) * Number(e.perPage), e.total)) + " / " + ce(e.total), 1)
|
|
], 64))
|
|
], 2)) : (f(), $("ul", {
|
|
key: 1,
|
|
class: P(s(Y))
|
|
}, [
|
|
v.value ? (f(), $("li", {
|
|
key: 0,
|
|
class: P(s(g))
|
|
}, [
|
|
Z(w.$slots, "default", $t(Bt(S(1))), () => [
|
|
me(Ot, ye(S(1), {
|
|
"link-class": s(J),
|
|
"link-current-class": s(j)
|
|
}), null, 16, ["link-class", "link-current-class"])
|
|
])
|
|
], 2)) : G("", !0),
|
|
m.value ? (f(), $("li", {
|
|
key: 1,
|
|
class: P(s(g))
|
|
}, [
|
|
se("span", {
|
|
class: P(s(M))
|
|
}, "…", 2)
|
|
], 2)) : G("", !0),
|
|
(f(!0), $(ke, null, $e(B.value, (R) => (f(), $("li", {
|
|
key: R.number,
|
|
class: P(s(g))
|
|
}, [
|
|
Z(w.$slots, "default", $t(Bt(R)), () => [
|
|
me(Ot, ye(R, {
|
|
"link-class": s(J),
|
|
"link-current-class": s(j)
|
|
}), null, 16, ["link-class", "link-current-class"])
|
|
])
|
|
], 2))), 128)),
|
|
b.value ? (f(), $("li", {
|
|
key: 2,
|
|
class: P(s(g))
|
|
}, [
|
|
se("span", {
|
|
class: P(s(M))
|
|
}, "…", 2)
|
|
], 2)) : G("", !0),
|
|
k.value ? (f(), $("li", {
|
|
key: 3,
|
|
class: P(s(g))
|
|
}, [
|
|
Z(w.$slots, "default", $t(Bt(S(c.value))), () => [
|
|
me(Ot, ye(S(c.value), {
|
|
"link-class": s(J),
|
|
"link-current-class": s(j)
|
|
}), null, 16, ["link-class", "link-current-class"])
|
|
])
|
|
], 2)) : G("", !0)
|
|
], 2))
|
|
], 2));
|
|
}
|
|
}), wo = {
|
|
install(e) {
|
|
Fe(e, ll);
|
|
}
|
|
}, Do = ["aria-checked"], xo = ["disabled", "required", "name", "autocomplete", "value"], $o = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "ORadio",
|
|
configField: "radio",
|
|
inheritAttrs: !1,
|
|
__name: "Radio",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** @model */
|
|
modelValue: { type: [String, Number, Boolean], default: void 0 },
|
|
/**
|
|
* Color of the control
|
|
* @values primary, info, success, warning, danger, and any other custom color
|
|
*/
|
|
variant: {
|
|
type: String,
|
|
default: () => i("radio.variant")
|
|
},
|
|
/**
|
|
* Size of the control
|
|
* @values small, medium, large
|
|
*/
|
|
size: {
|
|
type: String,
|
|
default: () => i("radio.size")
|
|
},
|
|
/** Input label, unnecessary when default slot is used */
|
|
label: { type: String, default: void 0 },
|
|
/** Same as native value */
|
|
nativeValue: { type: [String, Number, Boolean], default: void 0 },
|
|
/** Same as native disabled */
|
|
disabled: { type: Boolean, default: !1 },
|
|
/** Same as native required */
|
|
required: { type: Boolean, default: !1 },
|
|
/** Same as native name */
|
|
name: { type: String, default: void 0 },
|
|
/** Same as native autocomplete options to use in HTML5 validation */
|
|
autocomplete: {
|
|
type: String,
|
|
default: () => i("radio.autocomplete", "off")
|
|
},
|
|
/** Enable html 5 native validation */
|
|
useHtml5Validation: {
|
|
type: Boolean,
|
|
default: () => i("useHtml5Validation", !0)
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class when radio is disabled */
|
|
disabledClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the root element when checked */
|
|
checkedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the native input element */
|
|
inputClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the native input element when checked */
|
|
inputCheckedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the radio label */
|
|
labelClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the radio size */
|
|
sizeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the radio variant */
|
|
variantClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
emits: ["update:modelValue", "input", "focus", "blur", "invalid"],
|
|
setup(e, { expose: l, emit: a }) {
|
|
const t = e, o = a, r = z(), { onBlur: u, onFocus: c, onInvalid: y, setFocus: d } = rt(
|
|
r,
|
|
o,
|
|
t
|
|
), v = Nt(t, o), m = n(() => v.value === t.nativeValue);
|
|
function k(S) {
|
|
o("input", v.value, S);
|
|
}
|
|
const b = h(
|
|
["rootClass", "o-radio"],
|
|
["checkedClass", "o-radio--checked", null, m],
|
|
[
|
|
"sizeClass",
|
|
"o-radio--",
|
|
n(() => t.size),
|
|
n(() => !!t.size)
|
|
],
|
|
[
|
|
"disabledClass",
|
|
"o-radio--disabled",
|
|
null,
|
|
n(() => t.disabled)
|
|
],
|
|
[
|
|
"variantClass",
|
|
"o-radio--",
|
|
n(() => t.variant),
|
|
n(() => !!t.variant)
|
|
]
|
|
), F = h(
|
|
["inputClass", "o-radio__input"],
|
|
["inputCheckedClass", "o-radio__input--checked", null, m]
|
|
), B = h(["labelClass", "o-radio__label"]);
|
|
return l({ focus: d }), (S, C) => (f(), $("label", {
|
|
ref: "label",
|
|
class: P(s(b)),
|
|
"data-oruga": "radio",
|
|
role: "radio",
|
|
"aria-checked": m.value,
|
|
onClick: C[5] || (C[5] = ve(
|
|
//@ts-ignore
|
|
(...p) => s(d) && s(d)(...p),
|
|
["stop"]
|
|
)),
|
|
onKeydown: C[6] || (C[6] = he(ve(
|
|
//@ts-ignore
|
|
(...p) => s(d) && s(d)(...p),
|
|
["prevent"]
|
|
), ["enter"]))
|
|
}, [
|
|
Oe(se("input", ye(S.$attrs, {
|
|
ref_key: "inputRef",
|
|
ref: r,
|
|
"onUpdate:modelValue": C[0] || (C[0] = (p) => dt(v) ? v.value = p : null),
|
|
type: "radio",
|
|
"data-oruga-input": "radio",
|
|
class: s(F),
|
|
disabled: e.disabled,
|
|
required: e.required,
|
|
name: e.name,
|
|
autocomplete: e.autocomplete,
|
|
value: e.nativeValue,
|
|
onClick: C[1] || (C[1] = ve(() => {
|
|
}, ["stop"])),
|
|
onBlur: C[2] || (C[2] = //@ts-ignore
|
|
(...p) => s(u) && s(u)(...p)),
|
|
onFocus: C[3] || (C[3] = //@ts-ignore
|
|
(...p) => s(c) && s(c)(...p)),
|
|
onInvalid: C[4] || (C[4] = //@ts-ignore
|
|
(...p) => s(y) && s(y)(...p)),
|
|
onInput: k
|
|
}), null, 16, xo), [
|
|
[Il, s(v)]
|
|
]),
|
|
e.label || S.$slots.default ? (f(), $("span", {
|
|
key: 0,
|
|
class: P(s(B))
|
|
}, [
|
|
Z(S.$slots, "default", {}, () => [
|
|
Ve(ce(e.label), 1)
|
|
])
|
|
], 2)) : G("", !0)
|
|
], 42, Do));
|
|
}
|
|
}), Bo = {
|
|
install(e) {
|
|
Fe(e, $o);
|
|
}
|
|
}, Oo = {
|
|
install(e) {
|
|
Fe(e, pt);
|
|
}
|
|
}, Po = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OSkeleton",
|
|
configField: "skeleton",
|
|
__name: "Skeleton",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** Show or hide loader */
|
|
active: { type: Boolean, default: !0 },
|
|
/** Show a loading animation */
|
|
animated: {
|
|
type: Boolean,
|
|
default: () => i("skeleton.animated", !0)
|
|
},
|
|
/** Custom width */
|
|
width: { type: [Number, String], default: void 0 },
|
|
/** Custom height */
|
|
height: { type: [Number, String], default: void 0 },
|
|
/** Show a circle shape */
|
|
circle: { type: Boolean, default: !1 },
|
|
/** Enable rounded style */
|
|
rounded: {
|
|
type: Boolean,
|
|
default: () => i("skeleton.rounded", !0)
|
|
},
|
|
/** Number of shapes to display */
|
|
count: { type: Number, default: 1 },
|
|
/**
|
|
* Size of skeleton
|
|
* @values small, medium, large
|
|
*/
|
|
size: { type: String, default: void 0 },
|
|
/**
|
|
* Skeleton position in relation to the element
|
|
* @values left, centered, right
|
|
*/
|
|
position: {
|
|
type: String,
|
|
default: "left",
|
|
validator: (e) => ["left", "centered", "right"].indexOf(e) > -1
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the skeleton animation */
|
|
animationClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the skeleton position */
|
|
positionClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the skeleton item */
|
|
itemClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the skeleton item rounded */
|
|
itemRoundedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the skeleton size */
|
|
sizeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
setup(e) {
|
|
const l = e, a = n(() => ({
|
|
height: St(l.height),
|
|
width: St(l.width),
|
|
borderRadius: l.circle ? "50%" : null
|
|
})), t = h(
|
|
["rootClass", "o-sklt"],
|
|
[
|
|
"positionClass",
|
|
"o-sklt--",
|
|
n(() => l.position),
|
|
n(() => !!l.position)
|
|
]
|
|
), o = h(
|
|
["itemClass", "o-sklt__item"],
|
|
[
|
|
"itemRoundedClass",
|
|
"o-sklt__item--rounded",
|
|
null,
|
|
n(() => l.rounded)
|
|
],
|
|
[
|
|
"animationClass",
|
|
"o-sklt__item--animated",
|
|
null,
|
|
n(() => l.animated)
|
|
],
|
|
[
|
|
"sizeClass",
|
|
"o-sklt__item--",
|
|
n(() => l.size),
|
|
n(() => !!l.size)
|
|
]
|
|
);
|
|
return (r, u) => e.active ? (f(), $("div", {
|
|
key: 0,
|
|
"data-oruga": "skeleton",
|
|
class: P(s(t))
|
|
}, [
|
|
(f(!0), $(ke, null, $e(e.count, (c) => (f(), $("div", {
|
|
key: c,
|
|
class: P(s(o)),
|
|
style: et(a.value)
|
|
}, null, 6))), 128))
|
|
], 2)) : G("", !0);
|
|
}
|
|
}), Mo = {
|
|
install(e) {
|
|
Fe(e, Po);
|
|
}
|
|
}, nl = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OSidebar",
|
|
configField: "sidebar",
|
|
inheritAttrs: !1,
|
|
__name: "Sidebar",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** Whether siedbar is active or not, use v-model:active to make it two-way binding. */
|
|
active: { type: Boolean, default: !1 },
|
|
/**
|
|
* Color of the sidebar
|
|
* @values primary, info, success, warning, danger, and any other custom color
|
|
*/
|
|
variant: {
|
|
type: String,
|
|
default: () => i("sidebar.variant")
|
|
},
|
|
/** Show an overlay like modal */
|
|
overlay: { type: Boolean, default: i("sidebar.overlay", !1) },
|
|
/** Display the Sidebear inline */
|
|
inline: { type: Boolean, default: !1 },
|
|
/**
|
|
* Sidebar position
|
|
* @values top, right, bottom, left
|
|
*/
|
|
position: {
|
|
type: String,
|
|
default: () => i("sidebar.position", "left")
|
|
},
|
|
/** Show sidebar in fullheight */
|
|
fullheight: {
|
|
type: Boolean,
|
|
default: i("sidebar.fullheight", !1)
|
|
},
|
|
/** Show sidebar in fullwidth */
|
|
fullwidth: {
|
|
type: Boolean,
|
|
default: i("sidebar.fullwidth", !1)
|
|
},
|
|
/** Show a small sidebar */
|
|
reduce: { type: Boolean, default: i("sidebar.reduce", !1) },
|
|
/**
|
|
* Custom layout on mobile
|
|
* @values fullwidth, reduced, hidden
|
|
*/
|
|
mobile: {
|
|
type: String,
|
|
default: i("sidebar.mobile"),
|
|
validator: (e) => ["fullwidth", "reduced", "hidden"].indexOf(e) >= 0
|
|
},
|
|
/** Expand sidebar on hover when reduced or mobile is reduce */
|
|
expandOnHover: {
|
|
type: Boolean,
|
|
default: i("sidebar.expandOnHover", !1)
|
|
},
|
|
/** Custom animation (transition name) */
|
|
animation: {
|
|
type: String,
|
|
default: () => i("sidebar.animation")
|
|
},
|
|
/**
|
|
* Is Sidebar cancleable by pressing escape or clicking outside.
|
|
* @values escape, outside, true, false
|
|
*/
|
|
cancelable: {
|
|
type: [Array, Boolean],
|
|
default: () => i("sidebar.cancelable", ["escape", "outside"])
|
|
},
|
|
/** Callback function to call after user canceled (pressed escape / clicked outside) */
|
|
onCancel: { type: Function, default: () => {
|
|
} },
|
|
/** Callback function to call after close (programmatically close or user canceled) */
|
|
onClose: { type: Function, default: () => {
|
|
} },
|
|
/**
|
|
* Use `clip` to remove the body scrollbar, `keep` to have a non scrollable scrollbar to avoid shifting background,
|
|
* but will set body to position fixed, might break some layouts.
|
|
* @values keep, clip
|
|
*/
|
|
scroll: {
|
|
type: String,
|
|
default: () => i("sidebar.scroll", "clip"),
|
|
validator: (e) => ["clip", "keep"].indexOf(e) >= 0
|
|
},
|
|
/** Destroy sidebar on hide */
|
|
destroyOnHide: {
|
|
type: Boolean,
|
|
default: () => i("sidebar.destroyOnHide", !1)
|
|
},
|
|
/** Mobile breakpoint as max-width value */
|
|
mobileBreakpoint: {
|
|
type: String,
|
|
default: () => i("sidebar.mobileBreakpoint")
|
|
},
|
|
/**
|
|
* Append the component to another part of the DOM.
|
|
* Set `true` to append the component to the body.
|
|
* In addition, any CSS selector string or an actual DOM node can be used.
|
|
*/
|
|
teleport: {
|
|
type: [Boolean, String, Object],
|
|
default: () => i("sidebar.teleport", !1)
|
|
},
|
|
/**
|
|
* Component to be injected, used to open a component sidebar programmatically.
|
|
* Close sidebar within the component by emitting a 'close' event — emits('close')
|
|
*/
|
|
component: {
|
|
type: [Object, Function],
|
|
default: void 0
|
|
},
|
|
/** Props to be binded to the injected component. */
|
|
props: { type: Object, default: void 0 },
|
|
/** Events to be binded to the injected component. */
|
|
events: { type: Object, default: () => ({}) },
|
|
/** DOM element where the sidebar component will be created on (for programmatic usage). */
|
|
container: {
|
|
type: [Object, String],
|
|
default: () => i("sidebar.container", "body")
|
|
},
|
|
/**
|
|
* This is used internally for programmatic usage.
|
|
* @ignore
|
|
*/
|
|
programmatic: {
|
|
type: Object,
|
|
default: void 0
|
|
},
|
|
/**
|
|
* This is used internally for programmatic usage.
|
|
* @ignore
|
|
*/
|
|
promise: { type: Promise, default: void 0 },
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of sidebar component when its active */
|
|
activeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of sidebar when teleported */
|
|
teleportClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the sidebar overlay */
|
|
overlayClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the sidebar content */
|
|
contentClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the sidebar position */
|
|
positionClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the sidebar when is fullheight */
|
|
fullheightClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the sidebar when is fullwidth */
|
|
fullwidthClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the sidebar when its inlined */
|
|
inlineClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the sidebar when reduced */
|
|
reduceClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the sidebar when expanded on hover */
|
|
expandOnHoverClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the sidebar variant */
|
|
variantClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of sidebar component when on mobile */
|
|
mobileClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the body when sidebar clipped */
|
|
crollClipClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the body when sidebar is not clipped */
|
|
noScrollClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the sidebar content when sidebar is hidden */
|
|
hiddenClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the sidebar content when sidebar is visible */
|
|
visibleClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
emits: ["update:active", "close"],
|
|
setup(e, { expose: l, emit: a }) {
|
|
const t = e, o = a, r = z(), u = z(), { isActive: c, close: y, cancel: d } = Xt(
|
|
r,
|
|
t,
|
|
o,
|
|
{
|
|
destroyOnHide: t.destroyOnHide,
|
|
cancelOptions: i("sidebar.cancelable", ["escape", "outside"])
|
|
}
|
|
), { isMobile: v } = ct(t.mobileBreakpoint), m = z(null), k = z(!t.active);
|
|
fe(c, (J) => {
|
|
t.overlay && T(), J ? C() : p();
|
|
});
|
|
const b = n(
|
|
() => typeof t.teleport == "boolean" ? { to: "body", disabled: !t.teleport } : { to: t.teleport, disabled: !1 }
|
|
), F = n(() => {
|
|
if (t.animation)
|
|
return t.animation;
|
|
const J = t.position === "top" || t.position === "bottom";
|
|
return (t.position === "right" ? !c.value : c.value) ? J ? "slide-down" : "slide-next" : J ? "slide-up" : "slide-prev";
|
|
}), B = n(
|
|
() => t.mobile === "hidden" && v.value
|
|
);
|
|
it(() => {
|
|
t.active && C();
|
|
}), Tt(() => {
|
|
if (p(), Me && t.overlay) {
|
|
const J = m.value ? m.value : document.documentElement.scrollTop;
|
|
Y.value && (document.body.classList.remove(...Y.value), document.documentElement.classList.remove(...Y.value)), document.documentElement.scrollTop = J, document.body.style.top = null;
|
|
}
|
|
});
|
|
let S = null;
|
|
function C() {
|
|
Me && !t.overlay && (S = fa(u, V));
|
|
}
|
|
function p() {
|
|
S !== null && S();
|
|
}
|
|
function V(J) {
|
|
t.inline || !c.value || k.value || ((t.overlay || !J.composedPath().includes(u.value)) && J.preventDefault(), d("outside"));
|
|
}
|
|
function T() {
|
|
var J;
|
|
if (Me) {
|
|
if (t.scroll === "clip") {
|
|
(J = Y.value) != null && J.length && (c.value ? document.documentElement.classList.add(...Y.value) : document.documentElement.classList.remove(...Y.value));
|
|
return;
|
|
}
|
|
if (m.value = m.value ? m.value : document.documentElement.scrollTop, Y.value && (c.value ? document.body.classList.add(...Y.value) : document.body.classList.remove(...Y.value)), c.value) {
|
|
document.body.style.top = `-${m.value}px`;
|
|
return;
|
|
}
|
|
document.documentElement.scrollTop = m.value, document.body.style.top = null, m.value = null;
|
|
}
|
|
}
|
|
function I() {
|
|
k.value = !1;
|
|
}
|
|
function E() {
|
|
k.value = !0;
|
|
}
|
|
const K = h(
|
|
["rootClass", "o-side"],
|
|
["mobileClass", "o-side--mobile", null, v],
|
|
["activeClass", "o-side--active", null, c],
|
|
[
|
|
"teleportClass",
|
|
"o-side--teleport",
|
|
null,
|
|
n(() => !!t.teleport)
|
|
],
|
|
["inlineClass", "o-side--inline", null, n(() => t.inline)]
|
|
), te = h(["overlayClass", "o-side__overlay"]), O = h(
|
|
["contentClass", "o-side__content"],
|
|
[
|
|
"variantClass",
|
|
"o-side__content--",
|
|
n(() => t.variant),
|
|
n(() => !!t.variant)
|
|
],
|
|
[
|
|
"positionClass",
|
|
"o-side__content--",
|
|
n(() => t.position),
|
|
n(() => !!t.position)
|
|
],
|
|
[
|
|
"fullheightClass",
|
|
"o-side__content--fullheight",
|
|
null,
|
|
n(() => t.fullheight)
|
|
],
|
|
[
|
|
"fullwidthClass",
|
|
"o-side__content--fullwidth",
|
|
null,
|
|
n(
|
|
() => t.fullwidth || t.mobile === "fullwidth" && v.value
|
|
)
|
|
],
|
|
[
|
|
"reduceClass",
|
|
"o-side__content--reduced",
|
|
null,
|
|
n(
|
|
() => t.reduce || t.mobile === "reduced" && v.value
|
|
)
|
|
],
|
|
[
|
|
"expandOnHoverClass",
|
|
"o-side__content--reduced-expand",
|
|
null,
|
|
n(
|
|
() => t.expandOnHover && (!v.value || t.mobile !== "fullwidth")
|
|
)
|
|
],
|
|
["visibleClass", "o-side__content--visible", null, c],
|
|
[
|
|
"hiddenClass",
|
|
"o-side__content--hidden",
|
|
null,
|
|
n(() => !c.value)
|
|
]
|
|
), D = h(["scrollClipClass", "o-clipped"]), M = h(["noScrollClass", "o-noscroll"]), Y = n(
|
|
() => Xe(
|
|
t.scroll === "clip" ? D.value : M.value
|
|
)
|
|
);
|
|
return Y.value, l({ close: y, promise: t.promise }), (J, j) => (f(), ie(ua, {
|
|
to: b.value.to,
|
|
disabled: b.value.disabled
|
|
}, [
|
|
Oe(se("div", ye({
|
|
ref_key: "rootRef",
|
|
ref: r
|
|
}, J.$attrs, {
|
|
class: s(K),
|
|
"data-oruga": "sidebar"
|
|
}), [
|
|
e.overlay && s(c) ? (f(), $("div", {
|
|
key: 0,
|
|
class: P(s(te)),
|
|
tabindex: -1,
|
|
"aria-hidden": "true",
|
|
onClick: j[0] || (j[0] = (g) => V(g))
|
|
}, null, 2)) : G("", !0),
|
|
me(tt, {
|
|
name: F.value,
|
|
onAfterEnter: I,
|
|
onBeforeLeave: E
|
|
}, {
|
|
default: ue(() => [
|
|
Oe(se("div", {
|
|
ref_key: "sidebarContent",
|
|
ref: u,
|
|
class: P(s(O))
|
|
}, [
|
|
Z(J.$slots, "default", { close: s(y) }, () => [
|
|
e.component ? (f(), ie(Ke(e.component), ye({ key: 0 }, J.$props.props, ca(J.$props.events), { onClose: s(y) }), null, 16, ["onClose"])) : G("", !0)
|
|
])
|
|
], 2), [
|
|
[Ne, s(c)]
|
|
])
|
|
]),
|
|
_: 3
|
|
}, 8, ["name"])
|
|
], 16), [
|
|
[Ne, !B.value]
|
|
])
|
|
], 8, ["to", "disabled"]));
|
|
}
|
|
}), Oa = new Gt(), Vo = {
|
|
open(e) {
|
|
const a = mt({
|
|
programmatic: { instances: Oa },
|
|
active: !0
|
|
// set the active state to true
|
|
}, e);
|
|
a.promise = new Promise((r, u) => {
|
|
a.programmatic.resolve = r, a.programmatic.reject = u;
|
|
});
|
|
const t = zt, o = me(nl, a);
|
|
return o.appContext = t._context, Kt(o, document.createElement("div")), o.component.exposed;
|
|
},
|
|
closeAll(...e) {
|
|
Oa.walk((l) => l.exposed.close(...e));
|
|
}
|
|
}, To = Vo, Ro = {
|
|
install(e) {
|
|
Fe(e, nl), Ht(e, "sidebar", To);
|
|
}
|
|
}, ol = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OTooltip",
|
|
configField: "tooltip",
|
|
__name: "Tooltip",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** Whether tooltip is active or not, use v-model:active to make it two-way binding */
|
|
active: { type: Boolean, default: !1 },
|
|
/** Tooltip text, unnecessary when content slot is used */
|
|
label: { type: String, default: void 0 },
|
|
/**
|
|
* Color of the tooltip
|
|
* @values primary, info, success, warning, danger, and any other custom color
|
|
*/
|
|
variant: {
|
|
type: String,
|
|
default: () => i("tooltip.variant")
|
|
},
|
|
/**
|
|
* Position of the Tooltip relative to the trigger
|
|
* @values auto, top, bottom, left, right, top-right, top-left, bottom-left, bottom-right
|
|
*/
|
|
position: {
|
|
type: String,
|
|
default: () => i("tooltip.position", "auto"),
|
|
validator: (e) => [
|
|
"auto",
|
|
"top",
|
|
"bottom",
|
|
"left",
|
|
"right",
|
|
"top-right",
|
|
"top-left",
|
|
"bottom-left",
|
|
"bottom-right"
|
|
].indexOf(e) > -1
|
|
},
|
|
/** Tooltip will be always active */
|
|
always: { type: Boolean, default: !1 },
|
|
/** Tooltip will be disabled */
|
|
disabled: { type: Boolean, default: !1 },
|
|
/** Tooltip default animation */
|
|
animation: {
|
|
type: String,
|
|
default: () => i("tooltip.animation", "fade")
|
|
},
|
|
/** Tooltip will be multilined */
|
|
multiline: { type: Boolean, default: !1 },
|
|
/** Tooltip trigger tag name */
|
|
triggerTag: {
|
|
type: [String, Object, Function],
|
|
default: () => i("tooltip.triggerTag", "div")
|
|
},
|
|
/**
|
|
* Tooltip trigger events
|
|
* @values hover, click, focus, contextmenu
|
|
*/
|
|
triggers: {
|
|
type: Array,
|
|
default: () => i("tooltip.triggers", ["hover"]),
|
|
validator: (e) => e.filter(
|
|
(l) => ["click", "hover", "contextmenu", "focus"].indexOf(l) > -1
|
|
).length === e.length
|
|
},
|
|
/** Tooltip delay before it appears (number in ms) */
|
|
delay: { type: Number, default: void 0 },
|
|
/**
|
|
* Tooltip auto close options (pressing escape, clicking the content or outside)
|
|
* @values true, false, content, outside, escape
|
|
*/
|
|
closeable: {
|
|
type: [Array, Boolean],
|
|
default: () => i("tooltip.closeable", ["escape", "outside", "content"])
|
|
},
|
|
/**
|
|
* Append the component to another part of the DOM.
|
|
* Set `true` to append the component to the body.
|
|
* In addition, any CSS selector string or an actual DOM node can be used.
|
|
*/
|
|
teleport: {
|
|
type: [Boolean, String, Object],
|
|
default: () => i("dropdown.teleport", !1)
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class when the dropdown is teleported */
|
|
teleportClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the tooltip content */
|
|
contentClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the tooltip trigger position */
|
|
positionClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the tooltip trigger */
|
|
triggerClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the tooltip content when is multiline */
|
|
multilineClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the tooltip trigger when is always visible */
|
|
alwaysClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the tooltip variant */
|
|
variantClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the tooltip arrow */
|
|
arrowClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the tooltip arrow position */
|
|
arrowPositionClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
emits: ["update:active", "close", "open"],
|
|
setup(e, { emit: l }) {
|
|
const a = e, t = l, o = st("active", a, t, {
|
|
passive: !0
|
|
});
|
|
fe(o, (K) => {
|
|
t(K ? "open" : "close");
|
|
});
|
|
const r = z(), u = z(a.position);
|
|
fe(
|
|
() => a.position,
|
|
(K) => u.value = K
|
|
);
|
|
const c = z(), y = z(), d = z([]);
|
|
fe(o, (K) => {
|
|
K && Me ? setTimeout(() => {
|
|
v.value.indexOf("outside") >= 0 && d.value.push(
|
|
fa(c, m, [y])
|
|
), v.value.indexOf("escape") >= 0 && d.value.push(
|
|
_e("keyup", k, document, {
|
|
immediate: !0
|
|
})
|
|
);
|
|
}) : K || (d.value.forEach((te) => te()), d.value.length = 0);
|
|
});
|
|
const v = n(
|
|
() => typeof a.closeable == "boolean" ? a.closeable ? ["escape", "outside", "content"] : [] : a.closeable
|
|
);
|
|
function m() {
|
|
!o.value || a.always || v.value.indexOf("outside") < 0 || (o.value = !1);
|
|
}
|
|
function k(K) {
|
|
if (o.value && (K.key === "Escape" || K.key === "Esc")) {
|
|
if (v.value.indexOf("escape") < 0)
|
|
return;
|
|
o.value = !1;
|
|
}
|
|
}
|
|
function b() {
|
|
a.triggers.indexOf("click") < 0 || xe(() => setTimeout(() => C()));
|
|
}
|
|
function F(K) {
|
|
a.triggers.indexOf("contextmenu") < 0 || (K.preventDefault(), C());
|
|
}
|
|
function B() {
|
|
a.triggers.indexOf("focus") < 0 || C();
|
|
}
|
|
function S() {
|
|
a.triggers.indexOf("hover") < 0 || C();
|
|
}
|
|
function C() {
|
|
a.disabled || (a.delay ? r.value = setTimeout(() => {
|
|
o.value = !0, r.value = null;
|
|
}, a.delay) : o.value = !0);
|
|
}
|
|
function p() {
|
|
v.value.indexOf("content") < 0 || (o.value = !a.closeable, r.value && a.closeable && clearTimeout(r.value));
|
|
}
|
|
const V = h(
|
|
["rootClass", "o-tip"],
|
|
[
|
|
"teleportClass",
|
|
"o-tip--teleport",
|
|
null,
|
|
n(() => !!a.teleport)
|
|
]
|
|
), T = h(["triggerClass", "o-tip__trigger"]), I = h(
|
|
["arrowClass", "o-tip__arrow"],
|
|
[
|
|
"arrowPositionClass",
|
|
"o-tip__arrow--",
|
|
u,
|
|
n(() => !!u.value)
|
|
],
|
|
[
|
|
"variantArrowClass",
|
|
"o-tip__arrow--",
|
|
n(() => a.variant),
|
|
n(() => !!a.variant)
|
|
]
|
|
), E = h(
|
|
["contentClass", "o-tip__content"],
|
|
[
|
|
"positionClass",
|
|
"o-tip__content--",
|
|
u,
|
|
n(() => !!u.value)
|
|
],
|
|
[
|
|
"variantClass",
|
|
"o-tip__content--",
|
|
n(() => a.variant),
|
|
n(() => !!a.variant)
|
|
],
|
|
[
|
|
"multilineClass",
|
|
"o-tip__content--multiline",
|
|
null,
|
|
n(() => a.multiline)
|
|
],
|
|
[
|
|
"alwaysClass",
|
|
"o-tip__content--always",
|
|
null,
|
|
n(() => a.always)
|
|
]
|
|
);
|
|
return (K, te) => (f(), $("div", {
|
|
class: P(s(V)),
|
|
"data-oruga": "tooltip"
|
|
}, [
|
|
me(Ga, {
|
|
position: u.value,
|
|
"onUpdate:position": te[0] || (te[0] = (O) => u.value = O),
|
|
teleport: e.teleport,
|
|
class: P(s(V)),
|
|
trigger: y.value,
|
|
"default-position": "top",
|
|
disabled: !s(o)
|
|
}, {
|
|
default: ue(({ setContent: O }) => [
|
|
me(tt, { name: e.animation }, {
|
|
default: ue(() => [
|
|
Oe(se("div", {
|
|
ref: (D) => c.value = O(D),
|
|
class: P(s(E))
|
|
}, [
|
|
se("span", {
|
|
class: P(s(I))
|
|
}, null, 2),
|
|
Z(K.$slots, "content", {}, () => [
|
|
Ve(ce(e.label), 1)
|
|
])
|
|
], 2), [
|
|
[Ne, s(o) || e.always && !e.disabled]
|
|
])
|
|
]),
|
|
_: 2
|
|
}, 1032, ["name"])
|
|
]),
|
|
_: 3
|
|
}, 8, ["position", "teleport", "class", "trigger", "disabled"]),
|
|
(f(), ie(Ke(e.triggerTag), {
|
|
ref_key: "triggerRef",
|
|
ref: y,
|
|
class: P(s(T)),
|
|
"aria-haspopup": "true",
|
|
onClick: b,
|
|
onContextmenu: F,
|
|
onMouseenter: S,
|
|
onFocusCapture: B,
|
|
onBlurCapture: p,
|
|
onMouseleave: p
|
|
}, {
|
|
default: ue(() => [
|
|
Z(K.$slots, "default", { active: s(o) })
|
|
]),
|
|
_: 3
|
|
}, 40, ["class"]))
|
|
], 2));
|
|
}
|
|
}), Io = ["tabindex", "aria-label", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-disabled", "onKeydown"], zo = { key: 0 }, Pa = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OSliderThumb",
|
|
configField: "slider",
|
|
inheritAttrs: !1,
|
|
__name: "SliderThumb",
|
|
props: {
|
|
/** parent slider component props */
|
|
sliderProps: { type: Object, required: !0 },
|
|
modelValue: { type: Number, required: !0 },
|
|
sliderSize: { type: Function, required: !0 },
|
|
thumbWrapperClasses: {
|
|
type: Array,
|
|
required: !0
|
|
},
|
|
thumbClasses: {
|
|
type: Array,
|
|
required: !0
|
|
}
|
|
},
|
|
emits: ["update:modelValue", "change", "dragstart", "dragend"],
|
|
setup(e, { expose: l, emit: a }) {
|
|
const t = e, o = a, r = n(() => t.sliderProps), u = z(!1), c = z(!1), y = z(0), d = z(0), v = z(null), m = z(t.modelValue), k = n(() => r.value.tooltip), b = n(() => r.value.tooltipAlways), F = n(() => r.value.disabled), B = n(() => r.value.max), S = n(() => r.value.min), C = n(() => r.value.step), p = n(() => r.value.indicator), V = n(
|
|
() => Array.isArray(r.value.ariaLabel) ? r.value.ariaLabel[0] : r.value.ariaLabel
|
|
), T = n(() => {
|
|
const N = [S.value, B.value, C.value].map((L) => {
|
|
const H = ("" + L).split(".")[1];
|
|
return H ? H.length : 0;
|
|
});
|
|
return Math.max(...N);
|
|
}), I = n(
|
|
() => r.value.tooltipVariant ? r.value.tooltipVariant : r.value.variant
|
|
), E = n(
|
|
() => `${(t.modelValue - S.value) / (B.value - S.value) * 100}%`
|
|
), K = n(() => ({ left: E.value })), te = n(() => typeof r.value.customFormatter < "u" ? r.value.customFormatter(t.modelValue) : r.value.format === "percent" ? new Intl.NumberFormat(r.value.locale, {
|
|
style: "percent"
|
|
}).format((t.modelValue - S.value) / (B.value - S.value)) : new Intl.NumberFormat(r.value.locale).format(t.modelValue));
|
|
function O() {
|
|
u.value = !0;
|
|
}
|
|
function D() {
|
|
u.value = !1;
|
|
}
|
|
function M(N) {
|
|
F.value || (N.preventDefault(), w(N), Me && (document.addEventListener("mousemove", x), document.addEventListener("touchmove", x), document.addEventListener("mouseup", R), document.addEventListener("touchend", R), document.addEventListener("contextmenu", R)));
|
|
}
|
|
function Y() {
|
|
F.value || t.modelValue === S.value || (v.value = parseFloat(E.value) - C.value / (B.value - S.value) * 100, _(v.value), o("change"));
|
|
}
|
|
function J() {
|
|
F.value || t.modelValue === B.value || (v.value = parseFloat(E.value) + C.value / (B.value - S.value) * 100, _(v.value), o("change"));
|
|
}
|
|
function j() {
|
|
F.value || t.modelValue === S.value || (v.value = 0, _(v.value), o("change"));
|
|
}
|
|
function g() {
|
|
F.value || t.modelValue === B.value || (v.value = 100, _(v.value), o("change"));
|
|
}
|
|
function w(N) {
|
|
c.value = !0, o("dragstart"), N.type === "touchstart" && (N.clientX = N.touches[0].clientX), y.value = N.clientX, d.value = parseFloat(E.value), v.value = d.value;
|
|
}
|
|
function x(N) {
|
|
if (c.value) {
|
|
N.type === "touchmove" && (N.clientX = N.touches[0].clientX);
|
|
const L = (N.clientX - y.value) / t.sliderSize() * 100;
|
|
v.value = d.value + L, _(v.value);
|
|
}
|
|
}
|
|
function R() {
|
|
c.value = !1, o("dragend"), t.modelValue !== m.value && o("change"), _(v.value), Me && (document.removeEventListener("mousemove", x), document.removeEventListener("touchmove", x), document.removeEventListener("mouseup", R), document.removeEventListener("touchend", R), document.removeEventListener("contextmenu", R));
|
|
}
|
|
function _(N) {
|
|
if (N === null || isNaN(N))
|
|
return;
|
|
N < 0 ? N = 0 : N > 100 && (N = 100);
|
|
const L = 100 / ((B.value - S.value) / C.value);
|
|
let Q = Math.round(N / L) * L / 100 * (B.value - S.value) + S.value;
|
|
Q = parseFloat(Q.toFixed(T.value)), o("update:modelValue", Q), !c.value && Q !== m.value && (m.value = Q);
|
|
}
|
|
return l({ setPosition: _ }), (N, L) => (f(), $("div", {
|
|
class: P(e.thumbWrapperClasses),
|
|
style: et(K.value),
|
|
"data-oruga": "slider-thumb"
|
|
}, [
|
|
me(ol, {
|
|
label: te.value,
|
|
variant: I.value,
|
|
disabled: F.value || !k.value,
|
|
always: b.value || c.value || u.value
|
|
}, {
|
|
default: ue(() => [
|
|
se("div", ye(N.$attrs, {
|
|
class: e.thumbClasses,
|
|
tabindex: F.value ? null : 0,
|
|
role: "slider",
|
|
"aria-label": V.value,
|
|
"aria-valuenow": e.modelValue,
|
|
"aria-valuemin": S.value,
|
|
"aria-valuemax": B.value,
|
|
"aria-disabled": F.value,
|
|
"aria-orientation": "horizontal",
|
|
onMousedown: M,
|
|
onTouchstart: M,
|
|
onFocus: O,
|
|
onBlur: D,
|
|
onKeydown: [
|
|
he(ve(Y, ["prevent"]), ["left"]),
|
|
he(ve(J, ["prevent"]), ["right"]),
|
|
he(ve(Y, ["prevent"]), ["down"]),
|
|
he(ve(J, ["prevent"]), ["up"]),
|
|
he(ve(j, ["prevent"]), ["home"]),
|
|
he(ve(g, ["prevent"]), ["end"])
|
|
]
|
|
}), [
|
|
p.value ? (f(), $("span", zo, ce(te.value), 1)) : G("", !0)
|
|
], 16, Io)
|
|
]),
|
|
_: 1
|
|
}, 8, ["label", "variant", "disabled", "always"])
|
|
], 6));
|
|
}
|
|
}), il = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OSliderTick",
|
|
configField: "slider",
|
|
__name: "SliderTick",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** Value of single tick */
|
|
value: { type: Number, required: !0 },
|
|
/** Tick label */
|
|
label: { type: String, default: void 0 },
|
|
tickClass: {
|
|
type: [String, Function, Array],
|
|
default: void 0
|
|
},
|
|
/** Class when slider tick is hidden */
|
|
tickHiddenClass: {
|
|
type: [String, Function, Array],
|
|
default: void 0
|
|
},
|
|
/** Class of tick label */
|
|
tickLabelClass: {
|
|
type: [String, Function, Array],
|
|
default: void 0
|
|
}
|
|
},
|
|
setup(e) {
|
|
const l = e, { parent: a } = yt(), t = n(() => {
|
|
const y = (l.value - a.value.min) / (a.value.max - a.value.min) * 100;
|
|
return y >= 0 && y <= 100 ? y : 0;
|
|
}), o = n(
|
|
() => l.value === a.value.min || l.value === a.value.max
|
|
), r = n(() => ({ left: t.value + "%" })), u = h(
|
|
["tickClass", "o-slide__tick"],
|
|
["tickHiddenClass", "o-slide__tick--hidden", null, o]
|
|
), c = h([
|
|
"tickLabelClass",
|
|
"o-slide__tick-label"
|
|
]);
|
|
return (y, d) => (f(), $("div", {
|
|
class: P(s(u)),
|
|
style: et(r.value),
|
|
"data-oruga": "slider-tick"
|
|
}, [
|
|
y.$slots.default ? (f(), $("span", {
|
|
key: 0,
|
|
class: P(s(c))
|
|
}, [
|
|
Z(y.$slots, "default", {}, () => [
|
|
Ve(ce(e.label), 1)
|
|
])
|
|
], 2)) : G("", !0)
|
|
], 6));
|
|
}
|
|
}), Ho = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OSlider",
|
|
configField: "slider",
|
|
__name: "Slider",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** @model */
|
|
modelValue: {
|
|
type: [Number, Array],
|
|
default: 0
|
|
},
|
|
/** Minimum value */
|
|
min: { type: Number, default: 0 },
|
|
/** Maximum value */
|
|
max: { type: Number, default: 100 },
|
|
/** Step interval of ticks */
|
|
step: { type: Number, default: 1 },
|
|
/**
|
|
* Color of the slider
|
|
* @values primary, info, success, warning, danger, and any other custom color
|
|
*/
|
|
variant: {
|
|
type: String,
|
|
default: () => i("slider.variant")
|
|
},
|
|
/**
|
|
* Vertical size of slider
|
|
* @values small, medium, large
|
|
*/
|
|
size: {
|
|
type: String,
|
|
default: () => i("slider.size")
|
|
},
|
|
/** Show tick marks */
|
|
ticks: { type: Boolean, default: !1 },
|
|
/** Show tooltip when thumb is being dragged */
|
|
tooltip: {
|
|
type: Boolean,
|
|
default: () => i("slider.tooltip", !0)
|
|
},
|
|
/**
|
|
* Color of the tooltip
|
|
* @values primary, info, success, warning, danger, and any other custom color
|
|
*/
|
|
tooltipVariant: {
|
|
type: String,
|
|
default: () => i("slider.tooltipVariant")
|
|
},
|
|
/** Tooltip displays always */
|
|
tooltipAlways: { type: Boolean, default: !1 },
|
|
/** Rounded thumb */
|
|
rounded: {
|
|
type: Boolean,
|
|
default: () => i("slider.rounded", !1)
|
|
},
|
|
/** Slider will be disabled */
|
|
disabled: { type: Boolean, default: !1 },
|
|
/** Update v-model only when dragging is finished */
|
|
lazy: { type: Boolean, default: !1 },
|
|
/** Function to format the tooltip label for display */
|
|
customFormatter: { type: Function, default: void 0 },
|
|
/** Increases slider size on focus */
|
|
biggerSliderFocus: { type: Boolean, default: !1 },
|
|
/** Show indicators */
|
|
indicator: { type: Boolean, default: !1 },
|
|
/**
|
|
* Define v-model format
|
|
* @values row, percent
|
|
*/
|
|
format: {
|
|
type: String,
|
|
default: () => i("slider.format", "raw"),
|
|
validator: (e) => ["raw", "percent"].indexOf(e) >= 0
|
|
},
|
|
/** Date format locale */
|
|
locale: {
|
|
type: [String, Array],
|
|
default: () => i("locale")
|
|
},
|
|
/** Accessibility aria-label to to be passed to the slider thumb element. */
|
|
ariaLabel: {
|
|
type: [String, Array],
|
|
default: () => i("slider.ariaLabel")
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the vertical slider size */
|
|
sizeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the slider track */
|
|
trackClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the filled part of the slider */
|
|
fillClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class when the slider is rounded */
|
|
thumbRoundedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class when the thumb gets dragged */
|
|
thumbDraggingClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class when slider is disabled */
|
|
disabledClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the thumb wrapper */
|
|
thumbWrapperClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the thumb */
|
|
thumbClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the slider variant */
|
|
variantClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of slider tick */
|
|
tickClass: {
|
|
type: [String, Function, Array],
|
|
default: void 0
|
|
},
|
|
/** Class when slider tick is hidden */
|
|
tickHiddenClass: {
|
|
type: [String, Function, Array],
|
|
default: void 0
|
|
},
|
|
/** Class of tick label */
|
|
tickLabelClass: {
|
|
type: [String, Function, Array],
|
|
default: void 0
|
|
},
|
|
/** Class to display on the wrapper element when the slider is dragged */
|
|
thumbWrapperDraggingClass: {
|
|
type: [String, Function, Array],
|
|
default: void 0
|
|
}
|
|
},
|
|
emits: ["update:modelValue", "change", "dragging", "dragstart", "dragend"],
|
|
setup(e, { emit: l }) {
|
|
const a = e, t = l;
|
|
function o(w) {
|
|
const x = k.value ? [S.value, C.value] : d.value || 0;
|
|
t(w, x);
|
|
}
|
|
const r = n(() => ({
|
|
max: a.max,
|
|
min: a.min
|
|
}));
|
|
gt(void 0, { data: r });
|
|
const u = z(), c = z(), y = z(), d = z(null), v = z(null), m = z(!1), k = z(!1), b = z(), F = z();
|
|
I(a.modelValue), fe([d, v], () => E()), fe(
|
|
[() => a.min, () => a.max, () => a.modelValue],
|
|
() => I(a.modelValue)
|
|
);
|
|
const B = n(() => {
|
|
if (!a.ticks || a.min > a.max || a.step === 0)
|
|
return [];
|
|
const w = [];
|
|
for (let x = a.min + a.step; x < a.max; x = x + a.step)
|
|
w.push(x);
|
|
return w;
|
|
}), S = n(() => Math.min(d.value, v.value)), C = n(() => Math.max(d.value, v.value)), p = n(
|
|
() => k.value ? `${100 * (C.value - S.value) / (a.max - a.min)}%` : `${100 * (d.value - a.min) / (a.max - a.min)}%`
|
|
), V = n(
|
|
() => k.value ? `${100 * (S.value - a.min) / (a.max - a.min)}%` : "0%"
|
|
), T = n(() => ({
|
|
width: p.value,
|
|
left: V.value
|
|
}));
|
|
function I(w) {
|
|
if (!(a.min > a.max))
|
|
if (Array.isArray(w)) {
|
|
k.value = !0;
|
|
const x = typeof w[0] != "number" || isNaN(w[0]) ? a.min : Math.min(Math.max(a.min, w[0]), a.max), R = typeof w[1] != "number" || isNaN(w[1]) ? a.max : Math.max(Math.min(a.max, w[1]), a.min);
|
|
d.value = b.value ? R : x, v.value = b.value ? x : R;
|
|
} else
|
|
k.value = !1, d.value = isNaN(w) ? a.min : Math.min(a.max, Math.max(a.min, w)), v.value = null;
|
|
}
|
|
function E() {
|
|
k.value && (b.value = d.value > v.value), (!a.lazy || !m.value) && o("update:modelValue"), m.value && o("dragging");
|
|
}
|
|
function K() {
|
|
return u.value.getBoundingClientRect().width;
|
|
}
|
|
function te(w) {
|
|
if (a.disabled || F.value)
|
|
return;
|
|
const x = u.value.getBoundingClientRect().left, R = (w.clientX - x) / K() * 100, _ = a.min + R * (a.max - a.min) / 100, N = Math.abs(_ - d.value);
|
|
if (k.value) {
|
|
const L = Math.abs(_ - v.value);
|
|
if (N <= L) {
|
|
if (N < a.step / 2)
|
|
return;
|
|
c.value.setPosition(R);
|
|
} else {
|
|
if (L < a.step / 2)
|
|
return;
|
|
y.value.setPosition(R);
|
|
}
|
|
} else {
|
|
if (N < a.step / 2)
|
|
return;
|
|
c.value.setPosition(R);
|
|
}
|
|
o("change");
|
|
}
|
|
function O() {
|
|
m.value = !0, t("dragstart");
|
|
}
|
|
function D() {
|
|
F.value = !0, setTimeout(() => F.value = !1), m.value = !1, t("dragend"), a.lazy && o("update:modelValue");
|
|
}
|
|
const M = h(
|
|
["rootClass", "o-slide"],
|
|
[
|
|
"sizeClass",
|
|
"o-slide--",
|
|
n(() => a.size),
|
|
n(() => !!a.size)
|
|
],
|
|
[
|
|
"disabledClass",
|
|
"o-slide--disabled",
|
|
null,
|
|
n(() => a.disabled)
|
|
]
|
|
), Y = h(["trackClass", "o-slide__track"]), J = h(
|
|
["fillClass", "o-slide__fill"],
|
|
[
|
|
"variantClass",
|
|
"o-slide__fill--",
|
|
n(() => a.variant),
|
|
n(() => !!a.variant)
|
|
]
|
|
), j = h(
|
|
["thumbClass", "o-slide__thumb"],
|
|
["thumbDraggingClass", "o-slide__thumb--dragging", null, m],
|
|
[
|
|
"thumbRoundedClass",
|
|
"o-slide__thumb--rounded",
|
|
null,
|
|
n(() => a.rounded)
|
|
]
|
|
), g = h(
|
|
["thumbWrapperClass", "o-slide__thumb-wrapper"],
|
|
[
|
|
"thumbWrapperDraggingClass",
|
|
"o-slide__thumb-wrapper--dragging",
|
|
null,
|
|
m
|
|
]
|
|
);
|
|
return (w, x) => (f(), $("div", {
|
|
class: P(s(M)),
|
|
"data-oruga": "slider",
|
|
onClick: te
|
|
}, [
|
|
se("div", {
|
|
ref_key: "sliderRef",
|
|
ref: u,
|
|
class: P(s(Y))
|
|
}, [
|
|
se("div", {
|
|
class: P(s(J)),
|
|
style: et(T.value)
|
|
}, null, 6),
|
|
e.ticks ? (f(!0), $(ke, { key: 0 }, $e(B.value, (R, _) => (f(), ie(il, {
|
|
key: _,
|
|
value: R,
|
|
"tick-class": e.tickClass,
|
|
"tick-hidden-class": e.tickHiddenClass,
|
|
"tick-label-class": e.tickLabelClass
|
|
}, null, 8, ["value", "tick-class", "tick-hidden-class", "tick-label-class"]))), 128)) : G("", !0),
|
|
Z(w.$slots, "default"),
|
|
me(Pa, {
|
|
ref_key: "thumbStartRef",
|
|
ref: c,
|
|
modelValue: d.value,
|
|
"onUpdate:modelValue": x[0] || (x[0] = (R) => d.value = R),
|
|
"slider-props": a,
|
|
"slider-size": K,
|
|
"thumb-classes": s(j),
|
|
"thumb-wrapper-classes": s(g),
|
|
onChange: x[1] || (x[1] = (R) => o("change")),
|
|
onDragstart: O,
|
|
onDragend: D
|
|
}, null, 8, ["modelValue", "slider-props", "thumb-classes", "thumb-wrapper-classes"]),
|
|
k.value ? (f(), ie(Pa, {
|
|
key: 1,
|
|
ref_key: "thumbEndRef",
|
|
ref: y,
|
|
modelValue: v.value,
|
|
"onUpdate:modelValue": x[2] || (x[2] = (R) => v.value = R),
|
|
"slider-props": a,
|
|
"slider-size": K,
|
|
"thumb-classes": s(j),
|
|
"thumb-wrapper-classes": s(g),
|
|
onChange: x[3] || (x[3] = (R) => o("change")),
|
|
onDragstart: O,
|
|
onDragend: D
|
|
}, null, 8, ["modelValue", "slider-props", "thumb-classes", "thumb-wrapper-classes"])) : G("", !0)
|
|
], 2)
|
|
], 2));
|
|
}
|
|
}), No = {
|
|
install(e) {
|
|
Fe(e, Ho), Fe(e, il);
|
|
}
|
|
}, Lo = ["aria-current"], Eo = { key: 1 }, jo = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OSteps",
|
|
configField: "steps",
|
|
__name: "Steps",
|
|
props: /* @__PURE__ */ Be({
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** @model */
|
|
modelValue: { type: [String, Number], default: void 0 },
|
|
/**
|
|
* Color of the control
|
|
* @values primary, info, success, warning, danger, and any other custom color
|
|
*/
|
|
variant: {
|
|
type: String,
|
|
default: () => i("steps.variant")
|
|
},
|
|
/**
|
|
* Step size
|
|
* @values small, medium, large
|
|
*/
|
|
size: {
|
|
type: String,
|
|
default: () => i("steps.size")
|
|
},
|
|
/** Show step in vertical layout */
|
|
vertical: { type: Boolean, default: !1 },
|
|
/**
|
|
* Position of the step
|
|
* @values left, centered, right
|
|
*/
|
|
position: {
|
|
type: String,
|
|
default: void 0,
|
|
validator: (e) => ["left", "centered", "right"].indexOf(e) >= 0
|
|
},
|
|
/**
|
|
* Icon pack to use for the navigation
|
|
* @values mdi, fa, fas and any other custom icon pack
|
|
*/
|
|
iconPack: {
|
|
type: String,
|
|
default: () => i("steps.iconPack")
|
|
},
|
|
/** Icon to use for navigation button */
|
|
iconPrev: {
|
|
type: String,
|
|
default: () => i("steps.iconPrev", "chevron-left")
|
|
},
|
|
/** Icon to use for navigation button */
|
|
iconNext: {
|
|
type: String,
|
|
default: () => i("steps.iconNext", "chevron-right")
|
|
},
|
|
/**
|
|
* Next and previous buttons below the component. You can use this property if you want to use your own custom navigation items.
|
|
*/
|
|
hasNavigation: { type: Boolean, default: !0 },
|
|
/** Destroy stepItem on hide */
|
|
destroyOnHide: { type: Boolean, default: !1 },
|
|
/** Step navigation is animated */
|
|
animated: {
|
|
type: Boolean,
|
|
default: () => i("steps.animated", !0)
|
|
},
|
|
/**
|
|
* Transition animation name
|
|
* @values [next, prev], [right, left, down, up]
|
|
*/
|
|
animation: {
|
|
type: Array,
|
|
default: () => i("steps.animation", [
|
|
"slide-next",
|
|
"slide-prev",
|
|
"slide-down",
|
|
"slide-up"
|
|
]),
|
|
validator: (e) => e.length === 2 || e.length === 4
|
|
},
|
|
/** Apply animation on the initial render */
|
|
animateInitially: {
|
|
type: Boolean,
|
|
default: () => i("steps.animateInitially", !1)
|
|
},
|
|
/**
|
|
* Position of the marker label
|
|
* @values bottom, right, left
|
|
*/
|
|
labelPosition: {
|
|
type: String,
|
|
default: () => i("steps.labelPosition", "bottom"),
|
|
validator: (e) => ["bottom", "right", "left"].indexOf(e) > -1
|
|
},
|
|
/** Rounded step markers */
|
|
rounded: { type: Boolean, default: !0 },
|
|
/** Mobile breakpoint as max-width value */
|
|
mobileBreakpoint: {
|
|
type: String,
|
|
default: () => i("steps.mobileBreakpoint")
|
|
},
|
|
/** Accessibility next button aria label */
|
|
ariaNextLabel: {
|
|
type: String,
|
|
default: () => i("steps.ariaNextLabel")
|
|
},
|
|
/** Accessibility previous button aria label */
|
|
ariaPreviousLabel: {
|
|
type: String,
|
|
default: () => i("steps.ariaPreviousLabel")
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Size of the steps */
|
|
sizeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the tooltip trigger */
|
|
verticalClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Steps component when is vertical and its position changes */
|
|
positionClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the steps container */
|
|
stepsClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of Steps component when animation gets triggered */
|
|
animatedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Steps markers trigger when are rounded */
|
|
stepMarkerRoundedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Steps component dividers */
|
|
stepDividerClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Steps component marker */
|
|
stepMarkerClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Steps component content */
|
|
stepContentClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Steps component content when transition is happening */
|
|
stepContentTransitioningClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Steps component navigation element */
|
|
stepNavigationClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Steps component link */
|
|
stepLinkClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Steps component link when clickable */
|
|
stepLinkClickableClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Step component link label */
|
|
stepLinkLabelClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Step component link label when positioned */
|
|
stepLinkLabelPositionClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of steps component when on mobile */
|
|
mobileClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
}, {
|
|
modelValue: {},
|
|
modelModifiers: {}
|
|
}),
|
|
emits: /* @__PURE__ */ Be(["update:modelValue", "change"], ["update:modelValue"]),
|
|
setup(e, { emit: l }) {
|
|
const a = e, t = l, { isMobile: o } = ct(a.mobileBreakpoint), r = z(), u = n(() => ({
|
|
activeValue: d.value,
|
|
vertical: a.vertical,
|
|
animated: a.animated,
|
|
animation: a.animation,
|
|
animateInitially: a.animateInitially,
|
|
destroyOnHide: a.destroyOnHide
|
|
})), { sortedItems: c } = gt(r, {
|
|
data: u
|
|
}), y = n(
|
|
() => c.value.map((j) => ({
|
|
index: j.index,
|
|
identifier: j.identifier,
|
|
...vt(j.data)
|
|
}))
|
|
), d = Ee(e, "modelValue");
|
|
fe(
|
|
() => a.modelValue,
|
|
(j) => {
|
|
d.value !== j && T(j);
|
|
}
|
|
);
|
|
const v = n(
|
|
() => nt(d.value) && y.value.find((j) => j.value === d.value) || y.value[0]
|
|
), m = n(
|
|
() => y.value.some((j) => j.isTransitioning)
|
|
), k = n(() => !!F.value), b = n(() => !!B.value), F = n(() => {
|
|
if (!v.value)
|
|
return null;
|
|
let j = null;
|
|
for (let g = y.value.indexOf(v.value) - 1; g >= 0; g--)
|
|
if (y.value[g].visible) {
|
|
j = y.value[g];
|
|
break;
|
|
}
|
|
return j;
|
|
}), B = n(() => {
|
|
let j = null, g = v.value ? y.value.indexOf(v.value) + 1 : 0;
|
|
for (; g < y.value.length; g++)
|
|
if (y.value[g].visible) {
|
|
j = y.value[g];
|
|
break;
|
|
}
|
|
return j;
|
|
});
|
|
function S(j) {
|
|
var g;
|
|
return j.clickable === void 0 ? j.index < ((g = v.value) == null ? void 0 : g.index) : j.clickable;
|
|
}
|
|
function C() {
|
|
k.value && V(F.value);
|
|
}
|
|
function p() {
|
|
b.value && V(B.value);
|
|
}
|
|
function V(j) {
|
|
d.value !== j.value && T(j.value);
|
|
}
|
|
function T(j) {
|
|
const g = v.value.value, w = v.value, x = y.value.find((R) => R.value === j) || y.value[0];
|
|
w && x && (w.deactivate(x.index), x.activate(w.index)), xe(() => {
|
|
d.value = j, t("change", j, g);
|
|
});
|
|
}
|
|
const I = h(
|
|
["rootClass", "o-steps__wrapper"],
|
|
[
|
|
"sizeClass",
|
|
"o-steps--",
|
|
n(() => a.size),
|
|
n(() => !!a.size)
|
|
],
|
|
[
|
|
"verticalClass",
|
|
"o-steps__wrapper-vertical",
|
|
null,
|
|
n(() => a.vertical)
|
|
],
|
|
[
|
|
"positionClass",
|
|
"o-steps__wrapper-position-",
|
|
n(() => a.position),
|
|
n(() => a.position && a.vertical)
|
|
],
|
|
["mobileClass", "o-steps--mobile", null, o]
|
|
), E = h(
|
|
["stepsClass", "o-steps"],
|
|
[
|
|
"animatedClass",
|
|
"o-steps--animated",
|
|
null,
|
|
n(() => a.animated)
|
|
]
|
|
), K = h([
|
|
"stepDividerClass",
|
|
"o-steps__divider"
|
|
]), te = h(
|
|
["stepMarkerClass", "o-steps__marker"],
|
|
[
|
|
"stepMarkerRoundedClass",
|
|
"o-steps__marker--rounded",
|
|
null,
|
|
n(() => a.rounded)
|
|
]
|
|
), O = h(
|
|
["stepContentClass", "o-steps__content"],
|
|
[
|
|
"stepContentTransitioningClass",
|
|
"o-steps__content-transitioning",
|
|
null,
|
|
m
|
|
]
|
|
), D = h([
|
|
"stepNavigationClass",
|
|
"o-steps__navigation"
|
|
]), M = h([
|
|
"stepLinkLabelClass",
|
|
"o-steps__title"
|
|
]);
|
|
function Y(j) {
|
|
return h(
|
|
["stepLinkClass", "o-steps__link"],
|
|
[
|
|
"stepLinkLabelPositionClass",
|
|
"o-steps__link-label-",
|
|
a.labelPosition,
|
|
!!a.labelPosition
|
|
],
|
|
[
|
|
"stepLinkClickableClass",
|
|
"o-steps__link-clickable",
|
|
null,
|
|
S(j)
|
|
]
|
|
).value;
|
|
}
|
|
function J(j) {
|
|
const g = h(
|
|
["itemHeaderClass", "o-steps__nav-item"],
|
|
[
|
|
"itemHeaderVariantClass",
|
|
"o-steps__nav-item--",
|
|
j.variant || a.variant,
|
|
!!j.variant || !!a.variant
|
|
],
|
|
[
|
|
"itemHeaderActiveClass",
|
|
"o-steps__nav-item-active",
|
|
null,
|
|
j.value === v.value.value
|
|
],
|
|
[
|
|
"itemHeaderPreviousClass",
|
|
"o-steps__nav-item-previous",
|
|
null,
|
|
v.value.index > j.index
|
|
]
|
|
);
|
|
return [{ [j.headerClass || ""]: !0 }, ...g.value];
|
|
}
|
|
return (j, g) => (f(), $("div", {
|
|
class: P(s(I)),
|
|
"data-oruga": "steps"
|
|
}, [
|
|
se("ol", {
|
|
class: P(s(E))
|
|
}, [
|
|
(f(!0), $(ke, null, $e(y.value, (w, x) => Oe((f(), $("li", {
|
|
key: w.value,
|
|
"aria-current": w.value === v.value.value ? "step" : void 0,
|
|
class: P(J(w))
|
|
}, [
|
|
x > 0 ? (f(), $("span", {
|
|
key: 0,
|
|
class: P(s(K))
|
|
}, null, 2)) : G("", !0),
|
|
(f(), ie(Ke(w.tag), {
|
|
role: "button",
|
|
tabindex: S(w) ? 0 : null,
|
|
class: P(Y(w)),
|
|
onClick: (R) => S(w) && V(w),
|
|
onKeydown: he((R) => S(w) && V(w), ["enter"])
|
|
}, {
|
|
default: ue(() => [
|
|
se("div", {
|
|
class: P(s(te))
|
|
}, [
|
|
w.icon ? (f(), ie(Te, {
|
|
key: 0,
|
|
icon: w.icon,
|
|
pack: w.iconPack,
|
|
size: e.size
|
|
}, null, 8, ["icon", "pack", "size"])) : w.step ? (f(), $("span", Eo, ce(w.step), 1)) : G("", !0)
|
|
], 2),
|
|
se("div", {
|
|
class: P(s(M))
|
|
}, ce(w.label), 3)
|
|
]),
|
|
_: 2
|
|
}, 1064, ["tabindex", "class", "onClick", "onKeydown"]))
|
|
], 10, Lo)), [
|
|
[Ne, w.visible]
|
|
])), 128))
|
|
], 2),
|
|
se("section", {
|
|
class: P(s(O))
|
|
}, [
|
|
Z(j.$slots, "default")
|
|
], 2),
|
|
Z(j.$slots, "navigation", {
|
|
previous: { disabled: !k.value, action: C },
|
|
next: { disabled: !b.value, action: p }
|
|
}, () => [
|
|
e.hasNavigation ? (f(), $("nav", {
|
|
key: 0,
|
|
class: P(s(D))
|
|
}, [
|
|
me(At, {
|
|
role: "button",
|
|
"icon-left": e.iconPrev,
|
|
"icon-pack": e.iconPack,
|
|
"icon-both": "",
|
|
disabled: !k.value,
|
|
"aria-label": e.ariaPreviousLabel,
|
|
onClick: ve(C, ["prevent"])
|
|
}, null, 8, ["icon-left", "icon-pack", "disabled", "aria-label"]),
|
|
me(At, {
|
|
role: "button",
|
|
"icon-left": e.iconNext,
|
|
"icon-pack": e.iconPack,
|
|
"icon-both": "",
|
|
disabled: !b.value,
|
|
"aria-label": e.ariaNextLabel,
|
|
onClick: ve(p, ["prevent"])
|
|
}, null, 8, ["icon-left", "icon-pack", "disabled", "aria-label"])
|
|
], 2)) : G("", !0)
|
|
])
|
|
], 2));
|
|
}
|
|
}), Wo = ["data-id", "tabindex", "role"], Yo = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OStepItem",
|
|
configField: "steps",
|
|
inheritAttrs: !1,
|
|
__name: "StepItem",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** Item value (it will be used as v-model of wrapper component) */
|
|
value: { type: [String, Number], default: () => ot() },
|
|
/** Item label */
|
|
label: { type: String, default: void 0 },
|
|
/** Step marker content (when there is no icon) */
|
|
step: { type: [String, Number], default: void 0 },
|
|
/**
|
|
* Default style for the step.
|
|
* This will override parent type.
|
|
* Could be used to set a completed step to "success" for example
|
|
*/
|
|
variant: { type: String, default: void 0 },
|
|
/**
|
|
* Item can be used directly to navigate.
|
|
* If undefined, previous steps are clickable while the others are not
|
|
*/
|
|
clickable: { type: Boolean, default: void 0 },
|
|
/** Show/hide item */
|
|
visible: { type: Boolean, default: !0 },
|
|
/** Icon on the left */
|
|
icon: {
|
|
type: String,
|
|
default: () => i("steps.icon")
|
|
},
|
|
/** Icon pack */
|
|
iconPack: {
|
|
type: String,
|
|
default: () => i("steps.iconPack")
|
|
},
|
|
/** Step item tag name */
|
|
tag: {
|
|
type: [String, Object, Function],
|
|
default: () => i("steps.itemTag", "button")
|
|
},
|
|
/** Role attribute to be passed to the div wrapper for better accessibility */
|
|
ariaRole: {
|
|
type: String,
|
|
default: () => i("steps.ariaRole", "tab")
|
|
},
|
|
/** Sets a class to the item header */
|
|
headerClass: { type: String, default: void 0 },
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the content item */
|
|
itemClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the nav item */
|
|
itemHeaderClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the nav item when active */
|
|
itemHeaderActiveClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the nav item behind the active one */
|
|
itemHeaderPreviousClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the nav item with variant (default value by parent steps component) */
|
|
itemHeaderVariantClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
emits: ["activate", "deactivate"],
|
|
setup(e, { emit: l }) {
|
|
const a = e, t = l, o = Rt(), r = n(() => ({
|
|
...a,
|
|
$slots: o,
|
|
isTransitioning: v.value,
|
|
activate: b,
|
|
deactivate: F
|
|
})), { parent: u, item: c } = yt({
|
|
data: r
|
|
}), y = z(), d = n(() => Vt(a.value, u.value.activeValue)), v = z(!1), m = n(() => {
|
|
const p = u.value.vertical && u.value.animation.length === 4 ? 2 : 0;
|
|
return u.value.animation[p];
|
|
}), k = n(() => {
|
|
const p = u.value.vertical && u.value.animation.length === 4 ? 3 : 1;
|
|
return u.value.animation[p];
|
|
});
|
|
function b(p) {
|
|
y.value = c.value.index < p ? m.value : k.value, t("activate");
|
|
}
|
|
function F(p) {
|
|
y.value = p < c.value.index ? m.value : k.value, t("deactivate");
|
|
}
|
|
function B() {
|
|
v.value = !0;
|
|
}
|
|
function S() {
|
|
v.value = !0;
|
|
}
|
|
const C = h(["itemClass", "o-steps__item"]);
|
|
return (p, V) => (f(), ie(tt, {
|
|
css: s(u).animated,
|
|
name: y.value,
|
|
appear: s(u).animateInitially,
|
|
onAfterEnter: B,
|
|
onBeforeLeave: S
|
|
}, {
|
|
default: ue(() => [
|
|
!s(u).destroyOnHide || d.value && e.visible ? Oe((f(), $("div", ye({
|
|
key: 0,
|
|
ref: "rootRef"
|
|
}, p.$attrs, {
|
|
class: s(C),
|
|
"data-id": `steps-${s(c).identifier}`,
|
|
"data-oruga": "steps-item",
|
|
tabindex: d.value ? 0 : -1,
|
|
role: e.ariaRole,
|
|
"aria-roledescription": "item"
|
|
}), [
|
|
Z(p.$slots, "default")
|
|
], 16, Wo)), [
|
|
[Ne, d.value && e.visible]
|
|
]) : G("", !0)
|
|
]),
|
|
_: 3
|
|
}, 8, ["css", "name", "appear"]));
|
|
}
|
|
}), Ko = {
|
|
install(e) {
|
|
Fe(e, jo), Fe(e, Yo);
|
|
}
|
|
}, Uo = ["aria-checked"], qo = ["disabled", "required", "name", "autocomplete", "value", "true-value", "false-value"], Xo = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OSwitch",
|
|
configField: "switch",
|
|
inheritAttrs: !1,
|
|
__name: "Switch",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** @model */
|
|
modelValue: { type: [String, Number, Boolean], default: void 0 },
|
|
/**
|
|
* Color of the control
|
|
* @values primary, info, success, warning, danger, and any other custom color
|
|
*/
|
|
variant: {
|
|
type: String,
|
|
default: () => i("switch.variant")
|
|
},
|
|
/**
|
|
* Color of the switch when is passive
|
|
* @values primary, info, success, warning, danger, and any other custom color
|
|
*/
|
|
passiveVariant: {
|
|
type: String,
|
|
default: () => i("switch.passiveVariant")
|
|
},
|
|
/**
|
|
* Size of the control
|
|
* @values small, medium, large
|
|
*/
|
|
size: {
|
|
type: String,
|
|
default: () => i("switch.size")
|
|
},
|
|
/** Input label, unnecessary when default slot is used */
|
|
label: { type: String, default: void 0 },
|
|
/** Same as native value */
|
|
nativeValue: { type: [String, Number, Boolean], default: void 0 },
|
|
/** Same as native disabled */
|
|
disabled: { type: Boolean, default: !1 },
|
|
/** Same as native required */
|
|
required: { type: Boolean, default: !1 },
|
|
/** Name attribute on native checkbox */
|
|
name: { type: String, default: void 0 },
|
|
/** Overrides the returned value when it's checked */
|
|
trueValue: { type: [String, Number, Boolean], default: !0 },
|
|
/** Overrides the returned value when it's not checked */
|
|
falseValue: { type: [String, Number, Boolean], default: !1 },
|
|
/** Rounded style */
|
|
rounded: { type: Boolean, default: !0 },
|
|
/** Label position */
|
|
position: { type: String, default: "right" },
|
|
/** Same as native autocomplete options to use in HTML5 validation */
|
|
autocomplete: {
|
|
type: String,
|
|
default: () => i("switch.autocomplete", "off")
|
|
},
|
|
/** Enable html 5 native validation */
|
|
useHtml5Validation: {
|
|
type: Boolean,
|
|
default: () => i("useHtml5Validation", !0)
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class when switch is disabled */
|
|
disabledClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the outer switch check */
|
|
switchClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the outer switch check when checked */
|
|
switchCheckedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the inner switch check */
|
|
switchCheckClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the switch when rounded */
|
|
roundedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the switch passive variant */
|
|
passiveVariantClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of switch label position */
|
|
positionClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Root class of the native input checkbox */
|
|
inputClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the native input element when checked */
|
|
inputCheckedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the switch label */
|
|
labelClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the switch size */
|
|
sizeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the switch variant */
|
|
variantClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
emits: ["update:modelValue", "input", "focus", "blur", "invalid"],
|
|
setup(e, { expose: l, emit: a }) {
|
|
const t = e, o = a, r = z(), { onBlur: u, onFocus: c, onInvalid: y, setFocus: d } = rt(
|
|
r,
|
|
o,
|
|
t
|
|
), v = Nt(t, o, {
|
|
passive: !0
|
|
}), m = n(
|
|
() => v.value === t.trueValue || Array.isArray(v.value) && v.value.includes(t.nativeValue)
|
|
);
|
|
function k(p) {
|
|
o("input", v.value, p);
|
|
}
|
|
const b = h(
|
|
["rootClass", "o-switch"],
|
|
[
|
|
"sizeClass",
|
|
"o-switch--",
|
|
n(() => t.size),
|
|
n(() => !!t.size)
|
|
],
|
|
[
|
|
"disabledClass",
|
|
"o-switch--disabled",
|
|
null,
|
|
n(() => t.disabled)
|
|
],
|
|
[
|
|
"variantClass",
|
|
"o-switch--",
|
|
n(() => t.variant),
|
|
n(() => !!t.variant)
|
|
],
|
|
[
|
|
"positionClass",
|
|
"o-switch--",
|
|
n(() => t.position),
|
|
n(() => !!t.position)
|
|
],
|
|
[
|
|
"passiveVariantClass",
|
|
"o-switch--",
|
|
n(() => t.passiveVariant + "-passive"),
|
|
n(() => !!t.passiveVariant)
|
|
]
|
|
), F = h(
|
|
["inputClass", "o-switch__input"],
|
|
["inputCheckedClass", "o-switch__input--checked", null, m]
|
|
), B = h(
|
|
["switchClass", "o-switch__check"],
|
|
["switchCheckedClass", "o-switch__check--checked", null, m],
|
|
["roundedClass", "o-switch--rounded", null, n(() => t.rounded)]
|
|
), S = h(
|
|
["switchCheckClass", "o-switch__check-switch"],
|
|
["roundedClass", "o-switch--rounded", null, n(() => t.rounded)]
|
|
), C = h(["labelClass", "o-switch__label"]);
|
|
return l({ focus: d }), (p, V) => (f(), $("label", {
|
|
ref: "label",
|
|
class: P(s(b)),
|
|
"data-oruga": "switch",
|
|
role: "switch",
|
|
"aria-checked": m.value,
|
|
onClick: V[5] || (V[5] = //@ts-ignore
|
|
(...T) => s(d) && s(d)(...T)),
|
|
onKeydown: V[6] || (V[6] = he(ve(
|
|
//@ts-ignore
|
|
(...T) => s(d) && s(d)(...T),
|
|
["prevent"]
|
|
), ["enter"]))
|
|
}, [
|
|
Oe(se("input", ye(p.$attrs, {
|
|
ref_key: "inputRef",
|
|
ref: r,
|
|
"onUpdate:modelValue": V[0] || (V[0] = (T) => dt(v) ? v.value = T : null),
|
|
type: "checkbox",
|
|
role: "switch",
|
|
"data-oruga-input": "switch",
|
|
class: s(F),
|
|
disabled: e.disabled,
|
|
required: e.required,
|
|
name: e.name,
|
|
autocomplete: e.autocomplete,
|
|
value: e.nativeValue,
|
|
"true-value": e.trueValue,
|
|
"false-value": e.falseValue,
|
|
onClick: V[1] || (V[1] = ve(() => {
|
|
}, ["stop"])),
|
|
onBlur: V[2] || (V[2] = //@ts-ignore
|
|
(...T) => s(u) && s(u)(...T)),
|
|
onFocus: V[3] || (V[3] = //@ts-ignore
|
|
(...T) => s(c) && s(c)(...T)),
|
|
onInvalid: V[4] || (V[4] = //@ts-ignore
|
|
(...T) => s(y) && s(y)(...T)),
|
|
onInput: k
|
|
}), null, 16, qo), [
|
|
[Na, s(v)]
|
|
]),
|
|
se("span", {
|
|
class: P(s(B))
|
|
}, [
|
|
se("span", {
|
|
class: P(s(S))
|
|
}, null, 2)
|
|
], 2),
|
|
e.label || p.$slots.default ? (f(), $("span", {
|
|
key: 0,
|
|
class: P(s(C))
|
|
}, [
|
|
Z(p.$slots, "default", {}, () => [
|
|
Ve(ce(e.label), 1)
|
|
])
|
|
], 2)) : G("", !0)
|
|
], 42, Uo));
|
|
}
|
|
}), Go = {
|
|
install(e) {
|
|
Fe(e, Xo);
|
|
}
|
|
}, Mt = be({
|
|
name: "OSlotComponent",
|
|
props: {
|
|
/** Component to be get the slot from */
|
|
component: { type: Object, required: !0 },
|
|
/** Slot name */
|
|
name: { type: String, default: "default" },
|
|
/** Props passed to the slot */
|
|
props: { type: Object, default: () => {
|
|
} },
|
|
/** Tag name of the slot wrapper element */
|
|
tag: {
|
|
type: [String, Object, Function],
|
|
default: "div"
|
|
}
|
|
},
|
|
render() {
|
|
const e = this.component.$slots[this.name] ? this.component.$slots[this.name](this.props) : {};
|
|
return zl(this.tag, {}, e);
|
|
}
|
|
}), Jo = ["value"], Qo = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OTableMobileSort",
|
|
configField: "table",
|
|
__name: "TableMobileSort",
|
|
props: {
|
|
currentSortColumn: {
|
|
type: Object,
|
|
default: void 0
|
|
},
|
|
columns: {
|
|
type: Array,
|
|
default: void 0
|
|
},
|
|
placeholder: { type: String, default: void 0 },
|
|
iconPack: { type: String, default: void 0 },
|
|
sortIcon: { type: String, default: "arrow-up" },
|
|
sortIconSize: { type: String, default: "small" },
|
|
isAsc: { type: Boolean, default: !1 },
|
|
mobileSortClasses: { type: Array, required: !0 }
|
|
},
|
|
emits: ["sort"],
|
|
setup(e, { emit: l }) {
|
|
const a = e, t = l, o = z(
|
|
ze(a.currentSortColumn, "identifier")
|
|
), r = n(
|
|
() => !a.columns || !a.columns.some(
|
|
(d) => ze(d, "identifier") === o.value
|
|
)
|
|
), u = n(
|
|
() => a.columns ? a.columns.filter((d) => d.sortable) : []
|
|
), c = n(
|
|
() => ze(a.currentSortColumn, "identifier") === o.value
|
|
);
|
|
fe(o, (d) => {
|
|
a.currentSortColumn.identifier !== d && y();
|
|
}), fe(
|
|
() => a.currentSortColumn,
|
|
(d) => {
|
|
o.value = ze(d, "identifier");
|
|
}
|
|
);
|
|
function y(d) {
|
|
const v = u.value.filter(
|
|
(m) => ze(m, "identifier") === o.value
|
|
)[0];
|
|
t("sort", v, d);
|
|
}
|
|
return (d, v) => (f(), $("div", {
|
|
class: P(e.mobileSortClasses)
|
|
}, [
|
|
me(qa, null, {
|
|
default: ue(() => [
|
|
me(pt, {
|
|
modelValue: o.value,
|
|
"onUpdate:modelValue": v[0] || (v[0] = (m) => o.value = m),
|
|
expanded: ""
|
|
}, {
|
|
default: ue(() => [
|
|
e.placeholder ? Oe((f(), $("option", {
|
|
key: 0,
|
|
value: {},
|
|
selected: "",
|
|
disabled: "",
|
|
hidden: ""
|
|
}, ce(e.placeholder), 513)), [
|
|
[Ne, r.value]
|
|
]) : G("", !0),
|
|
(f(!0), $(ke, null, $e(u.value, (m, k) => (f(), $("option", {
|
|
key: k,
|
|
value: m.identifier
|
|
}, ce(m.label), 9, Jo))), 128))
|
|
]),
|
|
_: 1
|
|
}, 8, ["modelValue"]),
|
|
me(At, {
|
|
onClick: v[1] || (v[1] = (m) => y(m))
|
|
}, {
|
|
default: ue(() => [
|
|
Oe(me(Te, {
|
|
icon: e.sortIcon,
|
|
pack: e.iconPack,
|
|
size: e.sortIconSize,
|
|
both: "",
|
|
rotation: e.isAsc ? 0 : 180
|
|
}, null, 8, ["icon", "pack", "size", "rotation"]), [
|
|
[Ne, c.value]
|
|
])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
], 2));
|
|
}
|
|
}), Zo = ["data-id"], sl = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OTableColumn",
|
|
configField: "table",
|
|
__name: "TableColumn",
|
|
props: {
|
|
/** Define the column label */
|
|
label: { type: String, default: void 0 },
|
|
/** Define an object property key if data is an object */
|
|
field: { type: String, default: void 0 },
|
|
/** Define a column sub heading */
|
|
subheading: { type: String, default: void 0 },
|
|
/** Add addtional meta information for the column for custom purpose*/
|
|
meta: {
|
|
type: [String, Number, Boolean, Function, Object, Array],
|
|
default: void 0
|
|
},
|
|
/** Column fixed width */
|
|
width: { type: [Number, String], default: void 0 },
|
|
/** Define column value as number */
|
|
numeric: { type: Boolean, default: !1 },
|
|
/**
|
|
* Position of the column content
|
|
* @values left, centered, right
|
|
*/
|
|
position: {
|
|
type: String,
|
|
default: void 0,
|
|
validator: (e) => ["left", "centered", "right"].indexOf(e) > -1
|
|
},
|
|
/** Enable an additional searchbar below the column header */
|
|
searchable: { type: Boolean, default: !1 },
|
|
/** Enable column sortability */
|
|
sortable: { type: Boolean, default: !1 },
|
|
/** Define whether the column is visible or not */
|
|
visible: { type: Boolean, default: !0 },
|
|
/** Define a custom sort function */
|
|
customSort: {
|
|
type: Function,
|
|
default: void 0
|
|
},
|
|
/** Define a custom funtion for the filter search */
|
|
customSearch: {
|
|
type: Function,
|
|
default: void 0
|
|
},
|
|
/** Whether the column is sticky or not */
|
|
sticky: { type: Boolean, default: !1 },
|
|
/** Make header selectable */
|
|
headerSelectable: { type: Boolean, default: !1 },
|
|
/**
|
|
* Adds native attributes to th
|
|
* @deprecated will be moved to table component in v0.9
|
|
*/
|
|
thAttrs: {
|
|
type: Function,
|
|
default: () => ({})
|
|
},
|
|
/**
|
|
* Adds native attributes to td
|
|
* @deprecated will be moved to table component in v0.9
|
|
*/
|
|
tdAttrs: {
|
|
type: Function,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
setup(e) {
|
|
const l = e, a = n(() => ({
|
|
width: St(l.width)
|
|
})), t = n(
|
|
() => !l.headerSelectable && l.sortable
|
|
), o = wt(), r = n(() => ({
|
|
...at(l),
|
|
// TODO: remove toRaw when tdAttrs/thAttrs are moved to table component
|
|
label: l.label,
|
|
field: l.field,
|
|
subheading: l.subheading,
|
|
meta: l.meta,
|
|
width: l.width,
|
|
numeric: l.numeric,
|
|
position: l.position,
|
|
searchable: l.searchable,
|
|
sortable: l.sortable,
|
|
visible: l.visible,
|
|
customSort: l.customSort,
|
|
customSearch: l.customSearch,
|
|
sticky: l.sticky,
|
|
headerSelectable: l.headerSelectable,
|
|
$el: o.proxy,
|
|
$slots: o.slots,
|
|
style: a.value,
|
|
isHeaderUnselectable: t.value
|
|
})), { item: u } = yt({ data: r });
|
|
return (c, y) => (f(), $("span", {
|
|
"data-id": s(u).identifier,
|
|
"data-oruga": "table-column"
|
|
}, [
|
|
Ve(ce(e.label) + " ", 1),
|
|
G("", !0)
|
|
], 8, Zo));
|
|
}
|
|
}), Ma = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OTablePagination",
|
|
configField: "table",
|
|
__name: "TablePagination",
|
|
props: {
|
|
current: { type: Number, default: void 0 },
|
|
paginated: { type: Boolean, default: !1 },
|
|
rootClass: {
|
|
type: [String, Array, Object],
|
|
default: void 0
|
|
}
|
|
},
|
|
emits: ["update:current", "change"],
|
|
setup(e, { emit: l }) {
|
|
const a = e, t = l, o = st("current", a, t);
|
|
function r(u) {
|
|
const c = u > 0 ? u : 1;
|
|
o.value = c, t("change", c);
|
|
}
|
|
return (u, c) => (f(), $("div", {
|
|
class: P(e.rootClass)
|
|
}, [
|
|
se("div", null, [
|
|
Z(u.$slots, "default")
|
|
]),
|
|
se("div", null, [
|
|
e.paginated ? (f(), ie(ll, ye({ key: 0 }, u.$attrs, {
|
|
current: s(o),
|
|
onChange: r
|
|
}), null, 16, ["current"])) : G("", !0)
|
|
])
|
|
], 2));
|
|
}
|
|
}), _o = ["tabindex"], ei = { key: 0 }, ti = { key: 1 }, ai = ["draggable", "onClick", "onDragstart", "onDragend", "onDrop", "onDragover", "onDragleave"], li = { key: 1 }, ni = { key: 0 }, oi = { key: 1 }, ii = { key: 2 }, si = { key: 1 }, ri = { key: 1 }, ui = { key: 2 }, di = ["draggable", "onClick", "onDblclick", "onMouseenter", "onMouseleave", "onContextmenu", "onDragstart", "onDragend", "onDrop", "onDragover", "onDragleave"], ci = ["colspan"], fi = { key: 0 }, vi = ["colspan"], pi = { key: 2 }, mi = ["colspan"], yi = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OTable",
|
|
configField: "table",
|
|
inheritAttrs: !1,
|
|
__name: "Table",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** Table data */
|
|
data: { type: Array, default: () => [] },
|
|
/** Table columns */
|
|
columns: { type: Array, default: () => [] },
|
|
/** Border to all cells */
|
|
bordered: {
|
|
type: Boolean,
|
|
default: () => i("table.bordered", !1)
|
|
},
|
|
/** Whether table is striped */
|
|
striped: {
|
|
type: Boolean,
|
|
default: () => i("table.striped", !1)
|
|
},
|
|
/** Makes the cells narrower */
|
|
narrowed: {
|
|
type: Boolean,
|
|
default: () => i("table.narrowed", !1)
|
|
},
|
|
/** Rows are highlighted when hovering */
|
|
hoverable: {
|
|
type: Boolean,
|
|
default: () => i("table.hoverable", !1)
|
|
},
|
|
/** Enable loading state */
|
|
loading: { type: Boolean, default: !1 },
|
|
/** Allow row details */
|
|
detailed: { type: Boolean, default: !1 },
|
|
/** Rows can be checked (multiple) */
|
|
checkable: { type: Boolean, default: !1 },
|
|
/** Show check/uncheck all checkbox in table header when checkable */
|
|
headerCheckable: { type: Boolean, default: !0 },
|
|
/**
|
|
* Position of the checkbox when checkable
|
|
* @values left, right
|
|
*/
|
|
checkboxPosition: {
|
|
type: String,
|
|
default: () => i("table.checkboxPosition", "left"),
|
|
validator: (e) => ["left", "right"].indexOf(e) >= 0
|
|
},
|
|
/**
|
|
* Color of the checkbox when checkable
|
|
* @values primary, info, success, warning, danger, and any other custom color
|
|
*/
|
|
checkboxVariant: {
|
|
type: String,
|
|
default: () => i("table.checkboxVariant")
|
|
},
|
|
/** Set which row is selected, use v-model:selected to make it two-way binding */
|
|
selected: { type: Object, default: void 0 },
|
|
/** Custom method to verify if a row is selectable, works when is selected. */
|
|
isRowSelectable: { type: Function, default: () => !0 },
|
|
/** Table can be focused and user can navigate with keyboard arrows (require selected) and rows are highlighted when hovering */
|
|
focusable: { type: Boolean, default: !1 },
|
|
/** Custom method to verify if row is checked, works when is checkable. Useful for backend pagination */
|
|
customIsChecked: {
|
|
type: Function,
|
|
default: void 0
|
|
},
|
|
/** Custom method to verify if a row is checkable, works when is checkable */
|
|
isRowCheckable: {
|
|
type: Function,
|
|
default: (e) => (
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
i("table.isRowCheckable", (l) => !0)(e)
|
|
)
|
|
},
|
|
/** Set which rows are checked, use v-model:checkedRows to make it two-way binding */
|
|
checkedRows: { type: Array, default: () => [] },
|
|
/** Rows appears as cards on mobile (collapse rows) */
|
|
mobileCards: {
|
|
type: Boolean,
|
|
default: () => i("table.mobileCards", !0)
|
|
},
|
|
/** Sets the default sort column and order — e.g. ['first_name', 'desc'] */
|
|
defaultSort: {
|
|
type: [String, Array],
|
|
default: () => i("table.defaultSort")
|
|
},
|
|
/**
|
|
* Sets the default sort column direction on the first click
|
|
* @values asc, desc
|
|
*/
|
|
defaultSortDirection: {
|
|
type: String,
|
|
default: () => i("table.defaultSortDirection", "asc")
|
|
},
|
|
/** Sets the header sorting icon */
|
|
sortIcon: {
|
|
type: String,
|
|
default: () => i("table.sortIcon", "arrow-up")
|
|
},
|
|
/**
|
|
* Sets the size of the sorting icon
|
|
* @values small, medium, large
|
|
*/
|
|
sortIconSize: {
|
|
type: String,
|
|
default: () => i("table.sortIconSize", "small")
|
|
},
|
|
/**
|
|
* Icon pack to use
|
|
* @values mdi, fa, fas and any other custom icon pack
|
|
*/
|
|
iconPack: {
|
|
type: String,
|
|
default: () => i("table.iconPack")
|
|
},
|
|
/** Columns won't be sorted with Javascript, use with sort event to sort in your backend */
|
|
backendSorting: {
|
|
type: Boolean,
|
|
default: () => i("table.backendSorting", !1)
|
|
},
|
|
/** Columns won't be filtered with Javascript, use with searchable prop to the columns to filter in your backend */
|
|
backendFiltering: {
|
|
type: Boolean,
|
|
default: () => i("table.backendFiltering", !1)
|
|
},
|
|
/** Add a class to row based on the return */
|
|
rowClass: {
|
|
type: Function,
|
|
default: (e, l) => (
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
i("table.rowClass", (a, t) => "")(e, l)
|
|
)
|
|
},
|
|
/** Allow pre-defined opened details. Ideal to open details via vue-router. (A unique key is required; check detail-key prop) */
|
|
openedDetailed: { type: Array, default: () => [] },
|
|
/** Controls the visibility of the trigger that toggles the detailed rows. */
|
|
hasDetailedVisible: {
|
|
type: Function,
|
|
default: (e) => (
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
i("table.hasDetailedVisible", (l) => !0)(e)
|
|
)
|
|
},
|
|
/** Use a unique key of your data Object when use detailed or opened detailed. (id recommended) */
|
|
detailKey: {
|
|
type: String,
|
|
default: () => i("table.detailKey")
|
|
},
|
|
/** Allow chevron icon and column to be visible */
|
|
showDetailIcon: {
|
|
type: Boolean,
|
|
default: () => i("table.showDetailIcon", !0)
|
|
},
|
|
/** Icon name of detail action */
|
|
detailIcon: {
|
|
type: String,
|
|
default: () => i("table.detailIcon", "chevron-right")
|
|
},
|
|
/** Custom style on details */
|
|
customDetailRow: { type: Boolean, default: !1 },
|
|
/* Transition name to use when toggling row details. */
|
|
detailTransition: {
|
|
type: String,
|
|
default: () => i("table.detailTransition", "slide")
|
|
},
|
|
/** Text when nothing is selected */
|
|
mobileSortPlaceholder: {
|
|
type: String,
|
|
default: () => i("table.mobileSortPlaceholder")
|
|
},
|
|
/** Use a unique key of your data Object for each row. Useful if your data prop has dynamic indices. (id recommended) */
|
|
customRowKey: {
|
|
type: String,
|
|
default: () => i("table.customRowKey")
|
|
},
|
|
/** Allows rows to be draggable */
|
|
draggable: { type: Boolean, default: !1 },
|
|
/** Allows columns to be draggable */
|
|
draggableColumn: { type: Boolean, default: !1 },
|
|
/** Add a horizontal scrollbar when table is too wide */
|
|
scrollable: { type: Boolean, default: void 0 },
|
|
/** Show a sticky table header */
|
|
stickyHeader: { type: Boolean, default: !1 },
|
|
/** Table fixed height */
|
|
height: { type: [Number, String], default: void 0 },
|
|
/** Add a native event to filter */
|
|
filtersEvent: { type: String, default: "" },
|
|
/** Filtering debounce time (in milliseconds) */
|
|
debounceSearch: {
|
|
type: Number,
|
|
default: () => i("table.debounceSearch", void 0)
|
|
},
|
|
/** Show header */
|
|
showHeader: {
|
|
type: Boolean,
|
|
default: () => i("table.showHeader", !0)
|
|
},
|
|
/** Make the checkbox column sticky when checkable */
|
|
stickyCheckbox: { type: Boolean, default: !1 },
|
|
/** Adds pagination to the table */
|
|
paginated: {
|
|
type: Boolean,
|
|
default: () => i("table.paginated", !1)
|
|
},
|
|
/** Rows won't be paginated with Javascript, use with page-change event to paginate in your backend */
|
|
backendPagination: { type: Boolean, default: !1 },
|
|
/** Total number of table data if backend-pagination is enabled */
|
|
total: { type: Number, default: 0 },
|
|
/** Current page of table data (if paginated), use v-model:currentPage to make it two-way binding */
|
|
currentPage: { type: Number, default: 1 },
|
|
/** How many rows per page (if paginated) */
|
|
perPage: {
|
|
type: [Number, String],
|
|
default: () => i("table.perPage", 20)
|
|
},
|
|
/**
|
|
* Pagination position (if paginated)
|
|
* @values bottom, top, both
|
|
*/
|
|
paginationPosition: {
|
|
type: String,
|
|
default: () => i("table.paginationPosition", "bottom"),
|
|
validator: (e) => ["bottom", "top", "both"].indexOf(e) >= 0
|
|
},
|
|
/** Rounded pagination if paginated */
|
|
paginationRounded: {
|
|
type: Boolean,
|
|
default: () => i("table.paginationRounded", !1)
|
|
},
|
|
/** Size of pagination if paginated */
|
|
paginationSize: {
|
|
type: String,
|
|
default: () => i("table.paginationSize", "small")
|
|
},
|
|
/** Enable simple style pagination if paginated */
|
|
paginationSimple: {
|
|
type: Boolean,
|
|
default: () => i("table.paginationSimple", !1)
|
|
},
|
|
/**
|
|
* Pagination buttons order if paginated
|
|
* @values centered, right, left
|
|
*/
|
|
paginationOrder: {
|
|
type: String,
|
|
default: () => i("table.paginationOrder"),
|
|
validator: (e) => ["centered", "right", "left"].indexOf(e) >= 0
|
|
},
|
|
/** Mobile breakpoint as max-width value */
|
|
mobileBreakpoint: {
|
|
type: String,
|
|
default: () => i("table.mobileBreakpoint")
|
|
},
|
|
/** Accessibility label for the pagination next page button. */
|
|
ariaNextLabel: {
|
|
type: String,
|
|
default: () => i("table.ariaNextLabel")
|
|
},
|
|
/** Accessibility label for the pagination previous page button. */
|
|
ariaPreviousLabel: {
|
|
type: String,
|
|
default: () => i("table.ariaPreviousLabel")
|
|
},
|
|
/** Accessibility label for the pagination page button. */
|
|
ariaPageLabel: {
|
|
type: String,
|
|
default: () => i("table.ariaPageLabel")
|
|
},
|
|
/** Accessibility label for the pagination current page button. */
|
|
ariaCurrentLabel: {
|
|
type: String,
|
|
default: () => i("table.ariaCurrentLabel")
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table */
|
|
tableClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table wrapper */
|
|
wrapperClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table footer */
|
|
footerClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table when it is empty */
|
|
emptyClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table row detail */
|
|
detailedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table when is bordered */
|
|
borderedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table when rows are striped */
|
|
stripedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table when rows are narrowed */
|
|
narrowedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table when is hoverable */
|
|
hoverableClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table wrapper when header is sticky */
|
|
stickyHeaderClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table wrapper when its content is scrollable */
|
|
scrollableClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table row when selected */
|
|
trSelectedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table row when checkable and checked */
|
|
trCheckedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table `th` element */
|
|
thClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table `th` element when component is positioned */
|
|
thPositionClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table `th` element when component is sticky" */
|
|
thStickyClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table `th` element when is checkable */
|
|
thCheckboxClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table `th` element currently sorted */
|
|
thCurrentSortClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the sortable Table `th` element */
|
|
thSortableClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table `th` element that is unsortable */
|
|
thUnselectableClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table sort icon in the header */
|
|
thSortIconClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table `th` element of the detail column of triggers */
|
|
thDetailedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table `th` subheading element */
|
|
thSubheadingClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table `td` element */
|
|
tdClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table `td` element when component is positioned */
|
|
tdPositionClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table `td` element when component is sticky */
|
|
tdStickyClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table `td` element when is checkable */
|
|
tdCheckboxClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table `td` element that contains the chevron to trigger details */
|
|
tdDetailedChevronClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the sortable form wrapper on mobile */
|
|
mobileSortClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table pagination wrapper */
|
|
paginationWrapperClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Table component when on mobile */
|
|
mobileClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
emits: ["update:currentPage", "page-change", "update:selected", "select", "check", "check-all", "update:checkedRows", "sort", "filters-change", "filters-event", "update:openedDetailed", "details-open", "details-close", "click", "dblclick", "contextmenu", "mouseenter", "mouseleave", "cell-click", "dragstart", "dragend", "drop", "dragleave", "dragover", "columndragstart", "columndragend", "columndrop", "columndragleave", "columndragover"],
|
|
setup(e, { emit: l }) {
|
|
const a = e, t = l, { isMobile: o } = ct(a.mobileBreakpoint), r = n(() => a.mobileCards && o.value), u = z(), c = z(), y = gt(c), d = n(
|
|
() => y.sortedItems.value.map((A) => ({
|
|
index: A.index,
|
|
identifier: A.identifier,
|
|
...vt(A.data),
|
|
thAttrsData: {},
|
|
tdAttrsData: []
|
|
}))
|
|
), v = n(() => {
|
|
var A;
|
|
return (A = a.data) != null && A.length ? a.data.map(
|
|
(W) => !a.customRowKey && typeof W == "object" ? Object.assign({ __rowKey: ot() }, W) : W
|
|
) : [...a.data];
|
|
}), m = z(v.value), k = z(
|
|
a.backendPagination ? a.total : v.value.length
|
|
), b = st("currentPage", a, t, {
|
|
passive: !0
|
|
});
|
|
fe(
|
|
() => v.value,
|
|
(A) => {
|
|
a.backendFiltering ? m.value = [...A] : m.value = A.filter((W) => j(W)), a.backendSorting || L(g.value, !0), a.backendPagination || (k.value = m.value.length);
|
|
},
|
|
{ deep: !0 }
|
|
), fe(
|
|
() => a.total,
|
|
(A) => {
|
|
a.backendPagination && (k.value = A);
|
|
}
|
|
);
|
|
const F = n(() => ({
|
|
height: St(a.height)
|
|
})), B = n(() => {
|
|
if (!a.paginated)
|
|
return m.value;
|
|
const A = b.value, W = Number(a.perPage);
|
|
if (m.value.length <= W)
|
|
return m.value;
|
|
{
|
|
const re = (A - 1) * W, He = re + W;
|
|
return m.value.slice(re, He);
|
|
}
|
|
}), S = n(() => d.value ? d.value.filter(
|
|
(A) => A.visible || A.visible === void 0
|
|
) : []);
|
|
fe([B, S], () => {
|
|
if (S.value.length && B.value.length)
|
|
for (let A = 0; A < S.value.length; A++) {
|
|
const W = S.value[A];
|
|
W.thAttrsData = typeof W.thAttrs == "function" ? W.thAttrs(W) : {}, W.tdAttrsData = B.value.map(
|
|
(re) => typeof W.tdAttrs == "function" ? W.tdAttrs(re, W) : {}
|
|
);
|
|
}
|
|
});
|
|
const C = n(() => {
|
|
let A = S.value.length;
|
|
return A += a.checkable ? 1 : 0, A += a.detailed && a.showDetailIcon ? 1 : 0, A;
|
|
}), p = n(
|
|
() => d.value.some((A) => A.searchable)
|
|
), V = n(() => a.scrollable ? !0 : d.value ? d.value.some((A) => A.sticky) : !1), T = Rt(), I = n(() => T.subheading ? !0 : d.value.some((A) => !!A.subheading));
|
|
function E() {
|
|
if (T.footer) {
|
|
const A = T.footer();
|
|
if (A.length > 1)
|
|
return !0;
|
|
const W = A[0].tag;
|
|
if (W !== "th" && W !== "td")
|
|
return !1;
|
|
}
|
|
return !0;
|
|
}
|
|
function K(A, W) {
|
|
if (!B.value.length)
|
|
return;
|
|
let re = B.value.indexOf(a.selected) + A;
|
|
re = re < 0 ? 0 : re > B.value.length - 1 ? B.value.length - 1 : re;
|
|
const He = B.value[re];
|
|
if (a.isRowSelectable(He))
|
|
te(He, re, W);
|
|
else {
|
|
let U = null;
|
|
if (A > 0)
|
|
for (let de = re; de < B.value.length && U === null; de++)
|
|
a.isRowSelectable(B.value[de]) && (U = de);
|
|
else
|
|
for (let de = re; de >= 0 && U === null; de--)
|
|
a.isRowSelectable(B.value[de]) && (U = de);
|
|
U >= 0 && te(B.value[U], re, W);
|
|
}
|
|
}
|
|
function te(A, W, re) {
|
|
t("click", A, W, re), a.selected !== A && a.isRowSelectable(A) && (t("select", A, a.selected), t("update:selected", A));
|
|
}
|
|
function O(A, W) {
|
|
return W ? D(A) === D(W) : !1;
|
|
}
|
|
function D(A) {
|
|
return a.customRowKey ? A[a.customRowKey] : typeof A == "object" ? A.__rowKey : A;
|
|
}
|
|
const M = z({});
|
|
fe(
|
|
M.value,
|
|
(A) => {
|
|
a.debounceSearch ? ia(
|
|
() => J(A),
|
|
a.debounceSearch
|
|
)() : J(A);
|
|
},
|
|
{ deep: !0 }
|
|
);
|
|
function Y(A) {
|
|
t("filters-event", a.filtersEvent, M.value, A);
|
|
}
|
|
function J(A) {
|
|
a.backendFiltering ? t("filters-change", A) : (m.value = a.data.filter((W) => j(W)), a.backendPagination || (k.value = m.value.length), a.backendSorting || g.value && Object.keys(g.value).length > 0 && H(g.value));
|
|
}
|
|
function j(A) {
|
|
for (const W in M.value) {
|
|
if (!M.value[W])
|
|
continue;
|
|
const re = M.value[W], He = d.value.filter((U) => U.field === W)[0];
|
|
if (typeof (He == null ? void 0 : He.customSearch) == "function") {
|
|
if (!He.customSearch(A, re))
|
|
return !1;
|
|
} else {
|
|
const U = ze(A, W);
|
|
if (U == null)
|
|
return !1;
|
|
if (Number.isInteger(U)) {
|
|
if (U !== Number(re))
|
|
return !1;
|
|
} else {
|
|
const de = new RegExp(jl(re), "i");
|
|
if (Array.isArray(U)) {
|
|
if (!U.some(
|
|
(Se) => de.test(Aa(Se)) || de.test(Se)
|
|
))
|
|
return !1;
|
|
} else if (!de.test(Aa(U)) && !de.test(U))
|
|
return !1;
|
|
}
|
|
}
|
|
}
|
|
return !0;
|
|
}
|
|
const g = z(), w = z(!0);
|
|
it(() => xe(() => _()));
|
|
const x = n(
|
|
() => d.value.some((A) => A.sortable)
|
|
);
|
|
function R(A) {
|
|
var W;
|
|
return ((W = g.value) == null ? void 0 : W.identifier) === A.identifier;
|
|
}
|
|
function _() {
|
|
if (d.value.length && !g.value)
|
|
N();
|
|
else if (d.value.length && g.value && Object.keys(g.value).length > 0) {
|
|
for (let A = 0; A < d.value.length; A++)
|
|
if (g.value.field === d.value[A].field) {
|
|
g.value = d.value[A];
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
function N() {
|
|
if (!a.defaultSort)
|
|
return;
|
|
let A = "", W = a.defaultSortDirection;
|
|
Array.isArray(a.defaultSort) ? (A = a.defaultSort[0], a.defaultSort[1] && (W = a.defaultSort[1])) : A = a.defaultSort;
|
|
const re = d.value.filter(
|
|
(He) => He.field === A
|
|
)[0];
|
|
re && (w.value = W.toLowerCase() !== "desc", L(re, !0));
|
|
}
|
|
function L(A, W = !1, re) {
|
|
!A || !A.sortable || (W || (w.value = R(A) ? !w.value : a.defaultSortDirection.toLowerCase() !== "desc"), g.value && t("sort", A, w.value ? "asc" : "desc", re), a.backendSorting || H(A), g.value = A);
|
|
}
|
|
function H(A) {
|
|
m.value = Q(
|
|
m.value,
|
|
A.field,
|
|
A.customSort,
|
|
w.value
|
|
);
|
|
}
|
|
function Q(A, W, re, He) {
|
|
let U = [];
|
|
return re && typeof re == "function" ? U = [...A].sort((de, ge) => re(de, ge, He)) : U = [...A].sort((de, ge) => {
|
|
let Se = ze(de, W), Ge = ze(ge, W);
|
|
return typeof Se == "boolean" && typeof Ge == "boolean" ? He ? Se > Ge ? 1 : -1 : Se > Ge ? -1 : 1 : !Se && Se !== 0 ? 1 : !Ge && Ge !== 0 ? -1 : Se === Ge ? 0 : (Se = typeof Se == "string" ? Se.toUpperCase() : Se, Ge = typeof Ge == "string" ? Ge.toUpperCase() : Ge, He ? Se > Ge ? 1 : -1 : Se > Ge ? -1 : 1);
|
|
}), U;
|
|
}
|
|
const ne = z([...a.checkedRows]), Ae = z(null);
|
|
fe(
|
|
() => a.checkedRows,
|
|
(A) => {
|
|
ne.value = [...A];
|
|
},
|
|
{ deep: !0 }
|
|
);
|
|
const Pe = n(() => {
|
|
const A = B.value.filter(
|
|
(re) => a.isRowCheckable(re)
|
|
);
|
|
return A.length === 0 ? !1 : !A.some(
|
|
(re) => _t(
|
|
ne.value,
|
|
re,
|
|
a.customIsChecked
|
|
) < 0
|
|
);
|
|
}), Re = n(() => B.value.filter(
|
|
(W) => a.isRowCheckable(W)
|
|
).length === 0);
|
|
function Le(A) {
|
|
return _t(ne.value, A, a.customIsChecked) >= 0;
|
|
}
|
|
function we(A) {
|
|
const W = _t(ne.value, A, a.customIsChecked);
|
|
W >= 0 && ne.value.splice(W, 1);
|
|
}
|
|
function je() {
|
|
const A = Pe.value;
|
|
B.value.forEach((W) => {
|
|
a.isRowCheckable(W) && we(W), A || a.isRowCheckable(W) && ne.value.push(W);
|
|
}), t("check", ne.value), t("check-all", ne.value), t("update:checkedRows", ne.value);
|
|
}
|
|
function Je(A, W) {
|
|
a.isRowCheckable(A) && (Ae.value, Ae.value = W, Le(A) ? we(A) : ne.value.push(A), t("check", ne.value, A), t("update:checkedRows", ne.value));
|
|
}
|
|
const Qe = z(a.openedDetailed), ae = n(
|
|
() => a.detailed && a.showDetailIcon
|
|
);
|
|
fe(
|
|
() => a.openedDetailed,
|
|
(A) => {
|
|
Qe.value = A;
|
|
}
|
|
);
|
|
function ee(A) {
|
|
le(A) ? (Ce(A), t("details-close", A)) : (q(A), t("details-open", A)), t("update:openedDetailed", Qe.value);
|
|
}
|
|
function q(A) {
|
|
const W = We(A);
|
|
Qe.value.push(W);
|
|
}
|
|
function Ce(A) {
|
|
const W = We(A), re = Qe.value.indexOf(W);
|
|
re >= 0 && Qe.value.splice(re, 1);
|
|
}
|
|
function le(A) {
|
|
const W = We(A);
|
|
return Qe.value.indexOf(W) >= 0;
|
|
}
|
|
function Ue(A) {
|
|
return a.detailed && !a.customDetailRow && le(A);
|
|
}
|
|
function Ze(A) {
|
|
return a.detailed && a.customDetailRow && le(A);
|
|
}
|
|
function We(A) {
|
|
const W = a.detailKey;
|
|
return !(W != null && W.length) || !A ? A : A[W];
|
|
}
|
|
const X = z(!1), oe = z(!1), pe = n(() => a.draggable && !oe.value), De = n(
|
|
() => a.draggableColumn && !X.value
|
|
);
|
|
function Ie(A, W, re) {
|
|
a.draggable && t("dragstart", A, W, re);
|
|
}
|
|
function Ye(A, W, re) {
|
|
a.draggable && t("dragend", A, W, re);
|
|
}
|
|
function bt(A, W, re) {
|
|
a.draggable && t("drop", A, W, re);
|
|
}
|
|
function Dt(A, W, re) {
|
|
a.draggable && t("dragover", A, W, re);
|
|
}
|
|
function xt(A, W, re) {
|
|
a.draggable && t("dragleave", A, W, re);
|
|
}
|
|
function Jt(A, W, re) {
|
|
De.value && (oe.value = !0, t("columndragstart", A, W, re));
|
|
}
|
|
function rl(A, W, re) {
|
|
De.value && (oe.value = !1, t("columndragend", A, W, re));
|
|
}
|
|
function ul(A, W, re) {
|
|
De.value && t("columndrop", A, W, re);
|
|
}
|
|
function dl(A, W, re) {
|
|
De.value && t("columndragover", A, W, re);
|
|
}
|
|
function cl(A, W, re) {
|
|
De.value && t("columndragleave", A, W, re);
|
|
}
|
|
const fl = h(
|
|
["rootClass", "o-table__root"],
|
|
["mobileClass", "o-table__wrapper--mobile", null, r]
|
|
), vl = h(
|
|
["tableClass", "o-table"],
|
|
[
|
|
"borderedClass",
|
|
"o-table--bordered",
|
|
null,
|
|
n(() => a.bordered)
|
|
],
|
|
["stripedClass", "o-table--striped", null, n(() => a.striped)],
|
|
[
|
|
"narrowedClass",
|
|
"o-table--narrowed",
|
|
null,
|
|
n(() => a.narrowed)
|
|
],
|
|
[
|
|
"hoverableClass",
|
|
"o-table--hoverable",
|
|
null,
|
|
n(
|
|
() => (a.hoverable || a.focusable) && !!B.value.length
|
|
)
|
|
],
|
|
[
|
|
"emptyClass",
|
|
"o-table--table__empty",
|
|
null,
|
|
n(() => !B.value.length)
|
|
]
|
|
), pl = h(
|
|
["wrapperClass", "o-table__wrapper"],
|
|
[
|
|
"stickyHeaderClass",
|
|
"o-table__wrapper--sticky-header",
|
|
null,
|
|
n(() => a.stickyHeader)
|
|
],
|
|
["scrollableClass", "o-table__wrapper--scrollable", null, V],
|
|
["mobileClass", "o-table__wrapper--mobile", null, r]
|
|
), ml = h(["footerClass", "o-table__footer"]), ut = h(["thClass", "o-table__th"]), ga = h(["tdClass", "o-table__td"]), ba = h([
|
|
"thCheckboxClass",
|
|
"o-table__th-checkbox"
|
|
]), Qt = h([
|
|
"thDetailedClass",
|
|
"o-table__th--detailed"
|
|
]), yl = h(["thSubheadingClass", "o-table__th"]), Ca = h(
|
|
["tdCheckboxClass", "o-table__td-checkbox"],
|
|
[
|
|
"thStickyClass",
|
|
"o-table__th--sticky",
|
|
null,
|
|
n(() => a.stickyCheckbox)
|
|
]
|
|
), gl = h(["detailedClass", "o-table__detail"]), bl = h([
|
|
"tdDetailedChevronClass",
|
|
"o-table__td-chevron"
|
|
]), Cl = h([
|
|
"mobileSortClass",
|
|
"o-table__mobile-sort"
|
|
]), hl = h([
|
|
"paginationWrapperClass",
|
|
"o-table__pagination"
|
|
]), ha = n(
|
|
() => Xe(hl.value)
|
|
), kl = h([
|
|
"thSortIconClass",
|
|
"o-table__th__sort-icon"
|
|
]);
|
|
function ka(A) {
|
|
const W = h(
|
|
[
|
|
"thCurrentSortClass",
|
|
"o-table__th-current-sort",
|
|
null,
|
|
R(A)
|
|
],
|
|
["thSortableClass", "o-table__th--sortable", null, A.sortable],
|
|
[
|
|
"thUnselectableClass",
|
|
"o-table__th--unselectable",
|
|
null,
|
|
A.isHeaderUnselectable
|
|
],
|
|
[
|
|
"thPositionClass",
|
|
"o-table__th--",
|
|
A.position,
|
|
!!A.position
|
|
],
|
|
["thStickyClass", "o-table__th--sticky", null, A.sticky]
|
|
);
|
|
return [...ut.value, ...W.value];
|
|
}
|
|
function Sl(A, W) {
|
|
const re = h(
|
|
[
|
|
"trSelectedClass",
|
|
"o-table__tr--selected",
|
|
null,
|
|
O(A, a.selected)
|
|
],
|
|
["trCheckedClass", "o-table__tr--checked", null, Le(A)]
|
|
), He = a.rowClass(A, W);
|
|
return [...re.value, { [He]: !0 }];
|
|
}
|
|
function Fl(A, W) {
|
|
const re = h(
|
|
[
|
|
"tdPositionClass",
|
|
"o-table__td--",
|
|
W.position,
|
|
!!W.position
|
|
],
|
|
["tdStickyClass", "o-table__td--sticky", null, W.sticky]
|
|
);
|
|
return [...ga.value, ...re.value];
|
|
}
|
|
return (A, W) => {
|
|
var re, He;
|
|
return f(), $("div", {
|
|
ref_key: "rootRef",
|
|
ref: u,
|
|
class: P(s(fl)),
|
|
"data-oruga": "table"
|
|
}, [
|
|
se("div", {
|
|
ref_key: "slotRef",
|
|
ref: c,
|
|
style: { display: "none" }
|
|
}, [
|
|
Z(A.$slots, "default", {}, () => {
|
|
var U;
|
|
return [
|
|
(U = e.columns) != null && U.length ? (f(!0), $(ke, { key: 0 }, $e(e.columns, (de, ge) => (f(), ie(sl, ye({ key: ge }, de), {
|
|
default: ue(({ row: Se }) => [
|
|
Ve(ce(de.field ? Se[de.field] : Se), 1)
|
|
]),
|
|
_: 2
|
|
}, 1040))), 128)) : G("", !0)
|
|
];
|
|
})
|
|
], 512),
|
|
r.value && x.value ? (f(), ie(Qo, {
|
|
key: 0,
|
|
"current-sort-column": g.value,
|
|
columns: d.value,
|
|
placeholder: e.mobileSortPlaceholder,
|
|
"icon-pack": e.iconPack,
|
|
"sort-icon": e.sortIcon,
|
|
"sort-icon-size": e.sortIconSize,
|
|
"is-asc": w.value,
|
|
"mobile-sort-classes": s(Cl),
|
|
onSort: W[0] || (W[0] = (U, de) => L(U, null, de))
|
|
}, null, 8, ["current-sort-column", "columns", "placeholder", "icon-pack", "sort-icon", "sort-icon-size", "is-asc", "mobile-sort-classes"])) : G("", !0),
|
|
e.paginated && (e.paginationPosition === "top" || e.paginationPosition === "both") ? Z(A.$slots, "pagination", {
|
|
key: 1,
|
|
current: s(b),
|
|
perPage: e.perPage,
|
|
total: k.value,
|
|
change: (U) => b.value = U
|
|
}, () => [
|
|
me(Ma, ye(A.$attrs, {
|
|
current: s(b),
|
|
"onUpdate:current": W[1] || (W[1] = (U) => dt(b) ? b.value = U : null),
|
|
paginated: e.paginated,
|
|
"per-page": e.perPage,
|
|
total: k.value,
|
|
rounded: e.paginationRounded,
|
|
size: e.paginationSize,
|
|
order: e.paginationOrder,
|
|
simple: e.paginationSimple,
|
|
"icon-pack": e.iconPack,
|
|
"aria-next-label": e.ariaNextLabel,
|
|
"aria-previous-label": e.ariaPreviousLabel,
|
|
"aria-page-label": e.ariaPageLabel,
|
|
"aria-current-label": e.ariaCurrentLabel,
|
|
"root-class": ha.value,
|
|
onChange: W[2] || (W[2] = (U) => A.$emit("page-change", U))
|
|
}), {
|
|
default: ue(() => [
|
|
Z(A.$slots, "top-left")
|
|
]),
|
|
_: 3
|
|
}, 16, ["current", "paginated", "per-page", "total", "rounded", "size", "order", "simple", "icon-pack", "aria-next-label", "aria-previous-label", "aria-page-label", "aria-current-label", "root-class"])
|
|
]) : G("", !0),
|
|
se("div", {
|
|
class: P(s(pl)),
|
|
style: et(F.value)
|
|
}, [
|
|
se("table", {
|
|
class: P(s(vl)),
|
|
tabindex: e.focusable ? 0 : null,
|
|
onKeydown: [
|
|
W[3] || (W[3] = he(ve((U) => K(-1, U), ["self", "prevent"]), ["up"])),
|
|
W[4] || (W[4] = he(ve((U) => K(1, U), ["self", "prevent"]), ["down"]))
|
|
]
|
|
}, [
|
|
A.$slots.caption ? (f(), $("caption", ei, [
|
|
Z(A.$slots, "caption")
|
|
])) : G("", !0),
|
|
d.value.length && e.showHeader ? (f(), $("thead", ti, [
|
|
Z(A.$slots, "preheader"),
|
|
se("tr", null, [
|
|
ae.value ? (f(), $("th", {
|
|
key: 0,
|
|
class: P([...s(ut), ...s(Qt)])
|
|
}, null, 2)) : G("", !0),
|
|
e.checkable && e.checkboxPosition === "left" ? (f(), $("th", {
|
|
key: 1,
|
|
class: P([...s(ut), ...s(ba)])
|
|
}, [
|
|
Z(A.$slots, "check-all", {
|
|
isAllChecked: Pe.value,
|
|
isAllUncheckable: Re.value,
|
|
checkAll: je
|
|
}, () => [
|
|
e.headerCheckable ? (f(), ie(Pt, {
|
|
key: 0,
|
|
"model-value": Pe.value,
|
|
autocomplete: "off",
|
|
variant: e.checkboxVariant,
|
|
disabled: Re.value,
|
|
"onUpdate:modelValue": je
|
|
}, null, 8, ["model-value", "variant", "disabled"])) : G("", !0)
|
|
])
|
|
], 2)) : G("", !0),
|
|
(f(!0), $(ke, null, $e(S.value, (U, de) => {
|
|
var ge;
|
|
return f(), $("th", ye({
|
|
key: U.identifier + ":" + de + "header"
|
|
}, U.thAttrsData, {
|
|
class: ka(U),
|
|
style: r.value ? {} : U.style,
|
|
draggable: De.value,
|
|
onClick: ve((Se) => L(U, null, Se), ["stop"]),
|
|
onDragstart: (Se) => Jt(U, de, Se),
|
|
onDragend: (Se) => rl(U, de, Se),
|
|
onDrop: (Se) => ul(U, de, Se),
|
|
onDragover: (Se) => dl(U, de, Se),
|
|
onDragleave: (Se) => cl(U, de, Se)
|
|
}), [
|
|
(ge = U.$slots) != null && ge.header ? (f(), ie(s(Mt), {
|
|
key: 0,
|
|
component: U.$el,
|
|
name: "header",
|
|
tag: "span",
|
|
props: { column: U, index: de }
|
|
}, null, 8, ["component", "props"])) : (f(), $("span", li, [
|
|
Ve(ce(U.label) + " ", 1),
|
|
Oe(se("span", {
|
|
class: P(s(kl))
|
|
}, [
|
|
me(Te, {
|
|
icon: e.sortIcon,
|
|
pack: e.iconPack,
|
|
both: "",
|
|
size: e.sortIconSize,
|
|
rotation: w.value ? 0 : 180
|
|
}, null, 8, ["icon", "pack", "size", "rotation"])
|
|
], 2), [
|
|
[
|
|
Ne,
|
|
U.sortable && R(U)
|
|
]
|
|
])
|
|
]))
|
|
], 16, ai);
|
|
}), 128)),
|
|
e.checkable && e.checkboxPosition === "right" ? (f(), $("th", {
|
|
key: 2,
|
|
class: P([...s(ut), ...s(ba)])
|
|
}, [
|
|
e.headerCheckable ? Z(A.$slots, "check-all", {
|
|
key: 0,
|
|
isAllChecked: Pe.value,
|
|
isAllUncheckable: Re.value,
|
|
checkAll: je
|
|
}, () => [
|
|
me(Pt, {
|
|
"model-value": Pe.value,
|
|
autocomplete: "off",
|
|
variant: e.checkboxVariant,
|
|
disabled: Re.value,
|
|
"onUpdate:modelValue": je
|
|
}, null, 8, ["model-value", "variant", "disabled"])
|
|
]) : G("", !0)
|
|
], 2)) : G("", !0)
|
|
]),
|
|
p.value ? (f(), $("tr", ni, [
|
|
ae.value ? (f(), $("th", {
|
|
key: 0,
|
|
class: P([...s(ut), ...s(Qt)])
|
|
}, null, 2)) : G("", !0),
|
|
e.checkable && e.checkboxPosition === "left" ? (f(), $("th", oi)) : G("", !0),
|
|
(f(!0), $(ke, null, $e(S.value, (U, de) => {
|
|
var ge;
|
|
return f(), $("th", ye({
|
|
key: U.identifier + ":" + de + "searchable"
|
|
}, U.thAttrsData, {
|
|
class: ka(U),
|
|
style: r.value ? {} : U.style
|
|
}), [
|
|
U.searchable ? (f(), $(ke, { key: 0 }, [
|
|
(ge = U.$slots) != null && ge.searchable ? (f(), ie(s(Mt), {
|
|
key: 0,
|
|
component: U.$el,
|
|
name: "searchable",
|
|
tag: "span",
|
|
props: { column: U, index: de, filters: M.value }
|
|
}, null, 8, ["component", "props"])) : (f(), ie(Ft, ye({
|
|
key: 1,
|
|
modelValue: M.value[U.field],
|
|
"onUpdate:modelValue": (Se) => M.value[U.field] = Se,
|
|
type: U.numeric ? "number" : "text"
|
|
}, { [Hl(e.filtersEvent)]: Y }), null, 16, ["modelValue", "onUpdate:modelValue", "type"]))
|
|
], 64)) : G("", !0)
|
|
], 16);
|
|
}), 128)),
|
|
e.checkable && e.checkboxPosition === "right" ? (f(), $("th", ii)) : G("", !0)
|
|
])) : G("", !0),
|
|
I.value ? (f(), $("tr", si, [
|
|
ae.value ? (f(), $("th", {
|
|
key: 0,
|
|
class: P([...s(ut), ...s(Qt)])
|
|
}, null, 2)) : G("", !0),
|
|
e.checkable && e.checkboxPosition === "left" ? (f(), $("th", ri)) : G("", !0),
|
|
(f(!0), $(ke, null, $e(S.value, (U, de) => {
|
|
var ge;
|
|
return f(), $("th", {
|
|
key: U.identifier + ":" + de + "subheading",
|
|
style: et(r.value ? {} : U.style),
|
|
class: P([...s(ut), ...s(yl)])
|
|
}, [
|
|
(ge = U.$slots) != null && ge.subheading ? (f(), ie(s(Mt), {
|
|
key: 0,
|
|
component: U.$el,
|
|
name: "subheading",
|
|
tag: "span",
|
|
props: { column: U, index: de }
|
|
}, null, 8, ["component", "props"])) : (f(), $(ke, { key: 1 }, [
|
|
Ve(ce(U.subheading), 1)
|
|
], 64))
|
|
], 6);
|
|
}), 128)),
|
|
e.checkable && e.checkboxPosition === "right" ? (f(), $("th", ui)) : G("", !0)
|
|
])) : G("", !0)
|
|
])) : G("", !0),
|
|
se("tbody", null, [
|
|
(f(!0), $(ke, null, $e(B.value, (U, de) => (f(), $(ke, {
|
|
key: D(U) + "row"
|
|
}, [
|
|
se("tr", {
|
|
class: P(Sl(U, de)),
|
|
draggable: pe.value,
|
|
onClick: (ge) => te(U, de, ge),
|
|
onDblclick: (ge) => A.$emit("dblclick", U, de, ge),
|
|
onMouseenter: (ge) => A.$emit("mouseenter", U, de, ge),
|
|
onMouseleave: (ge) => A.$emit("mouseleave", U, de, ge),
|
|
onContextmenu: (ge) => A.$emit("contextmenu", U, de, ge),
|
|
onDragstart: (ge) => Ie(U, de, ge),
|
|
onDragend: (ge) => Ye(U, de, ge),
|
|
onDrop: (ge) => bt(U, de, ge),
|
|
onDragover: (ge) => Dt(U, de, ge),
|
|
onDragleave: (ge) => xt(U, de, ge)
|
|
}, [
|
|
ae.value ? (f(), $("td", {
|
|
key: 0,
|
|
class: P([
|
|
...s(ga),
|
|
...s(bl)
|
|
])
|
|
}, [
|
|
e.hasDetailedVisible(U) ? (f(), ie(Te, {
|
|
key: 0,
|
|
icon: e.detailIcon,
|
|
pack: e.iconPack,
|
|
rotation: le(U) ? 90 : 0,
|
|
role: "button",
|
|
clickable: "",
|
|
both: "",
|
|
onClick: ve((ge) => ee(U), ["stop"])
|
|
}, null, 8, ["icon", "pack", "rotation", "onClick"])) : G("", !0)
|
|
], 2)) : G("", !0),
|
|
e.checkable && e.checkboxPosition === "left" ? (f(), $("td", {
|
|
key: 1,
|
|
class: P([
|
|
...s(ut),
|
|
...s(Ca)
|
|
])
|
|
}, [
|
|
me(Pt, {
|
|
"model-value": Le(U),
|
|
autocomplete: "off",
|
|
variant: e.checkboxVariant,
|
|
disabled: !e.isRowCheckable(U),
|
|
"onUpdate:modelValue": (ge) => Je(U, de)
|
|
}, null, 8, ["model-value", "variant", "disabled", "onUpdate:modelValue"])
|
|
], 2)) : G("", !0),
|
|
(f(!0), $(ke, null, $e(S.value, (ge, Se) => (f(), ie(s(Mt), ye({
|
|
key: ge.identifier + de + ":" + Se
|
|
}, ge.tdAttrsData[de], {
|
|
component: ge.$el,
|
|
name: "default",
|
|
tag: "td",
|
|
class: Fl(U, ge),
|
|
style: r.value ? {} : ge.style,
|
|
"data-label": ge.label,
|
|
props: {
|
|
row: U,
|
|
column: ge,
|
|
index: de,
|
|
colindex: Se,
|
|
toggleDetails: ee
|
|
},
|
|
onClick: (Ge) => A.$emit(
|
|
"cell-click",
|
|
U,
|
|
ge,
|
|
de,
|
|
Se,
|
|
Ge
|
|
)
|
|
}), null, 16, ["component", "class", "style", "data-label", "props", "onClick"]))), 128)),
|
|
e.checkable && e.checkboxPosition === "right" ? (f(), $("td", {
|
|
key: 2,
|
|
class: P([
|
|
...s(ut),
|
|
...s(Ca)
|
|
])
|
|
}, [
|
|
me(Pt, {
|
|
"model-value": Le(U),
|
|
autocomplete: "off",
|
|
variant: e.checkboxVariant,
|
|
disabled: !e.isRowCheckable(U),
|
|
"onUpdate:modelValue": (ge) => Je(U, de)
|
|
}, null, 8, ["model-value", "variant", "disabled", "onUpdate:modelValue"])
|
|
], 2)) : G("", !0)
|
|
], 42, di),
|
|
me(tt, { name: e.detailTransition }, {
|
|
default: ue(() => [
|
|
Ue(U) ? (f(), $("tr", {
|
|
key: D(U) + "detail",
|
|
class: P(s(gl))
|
|
}, [
|
|
se("td", { colspan: C.value }, [
|
|
Z(A.$slots, "detail", {
|
|
row: U,
|
|
index: de
|
|
})
|
|
], 8, ci)
|
|
], 2)) : G("", !0)
|
|
]),
|
|
_: 2
|
|
}, 1032, ["name"]),
|
|
Ze(U) ? Z(A.$slots, "detail", {
|
|
key: 0,
|
|
row: U,
|
|
index: de
|
|
}) : G("", !0)
|
|
], 64))), 128)),
|
|
B.value.length ? G("", !0) : (f(), $("tr", fi, [
|
|
se("td", { colspan: C.value }, [
|
|
Z(A.$slots, "empty")
|
|
], 8, vi)
|
|
]))
|
|
]),
|
|
A.$slots.footer ? (f(), $("tfoot", pi, [
|
|
se("tr", {
|
|
class: P(s(ml))
|
|
}, [
|
|
E() ? Z(A.$slots, "footer", {
|
|
key: 0,
|
|
columnCount: C.value,
|
|
rowCount: (re = B.value) == null ? void 0 : re.length
|
|
}) : (f(), $("th", {
|
|
key: 1,
|
|
colspan: C.value
|
|
}, [
|
|
Z(A.$slots, "footer", {
|
|
columnCount: C.value,
|
|
rowCount: (He = B.value) == null ? void 0 : He.length
|
|
})
|
|
], 8, mi))
|
|
], 2)
|
|
])) : G("", !0)
|
|
], 42, _o),
|
|
Z(A.$slots, "loading", { loading: e.loading }, () => [
|
|
me(ya, {
|
|
"full-page": !1,
|
|
active: e.loading
|
|
}, null, 8, ["active"])
|
|
])
|
|
], 6),
|
|
e.checkable && A.$slots["bottom-left"] || e.paginated && (e.paginationPosition === "bottom" || e.paginationPosition === "both") ? Z(A.$slots, "pagination", {
|
|
key: 2,
|
|
current: s(b),
|
|
perPage: e.perPage,
|
|
total: k.value,
|
|
change: (U) => b.value = U
|
|
}, () => [
|
|
me(Ma, ye(A.$attrs, {
|
|
current: s(b),
|
|
"onUpdate:current": W[5] || (W[5] = (U) => dt(b) ? b.value = U : null),
|
|
paginated: e.paginated,
|
|
"per-page": e.perPage,
|
|
total: k.value,
|
|
rounded: e.paginationRounded,
|
|
size: e.paginationSize,
|
|
order: e.paginationOrder,
|
|
simple: e.paginationSimple,
|
|
"icon-pack": e.iconPack,
|
|
"aria-next-label": e.ariaNextLabel,
|
|
"aria-previous-label": e.ariaPreviousLabel,
|
|
"aria-page-label": e.ariaPageLabel,
|
|
"aria-current-label": e.ariaCurrentLabel,
|
|
"root-class": ha.value,
|
|
onChange: W[6] || (W[6] = (U) => A.$emit("page-change", U))
|
|
}), {
|
|
default: ue(() => [
|
|
Z(A.$slots, "bottom-left")
|
|
]),
|
|
_: 3
|
|
}, 16, ["current", "paginated", "per-page", "total", "rounded", "size", "order", "simple", "icon-pack", "aria-next-label", "aria-previous-label", "aria-page-label", "aria-current-label", "root-class"])
|
|
]) : G("", !0)
|
|
], 2);
|
|
};
|
|
}
|
|
}), gi = {
|
|
install(e) {
|
|
Fe(e, yi), Fe(e, sl);
|
|
}
|
|
}, bi = ["aria-orientation"], Ci = ["aria-controls", "aria-selected"], hi = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OTabs",
|
|
configField: "tabs",
|
|
__name: "Tabs",
|
|
props: /* @__PURE__ */ Be({
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** @model */
|
|
modelValue: { type: [String, Number], default: 0 },
|
|
/**
|
|
* Color of the control
|
|
* @values primary, info, success, warning, danger, and any other custom color
|
|
*/
|
|
variant: {
|
|
type: String,
|
|
default: () => i("tabs.variant")
|
|
},
|
|
/**
|
|
* Tab size
|
|
* @values small, medium, large
|
|
*/
|
|
size: {
|
|
type: String,
|
|
default: () => i("tabs.size")
|
|
},
|
|
/** Show tab in vertical layout */
|
|
vertical: {
|
|
type: Boolean,
|
|
default: () => i("tabs.vertical", !1)
|
|
},
|
|
/**
|
|
* Position of the tabs
|
|
* @values left, centered, right
|
|
*/
|
|
position: {
|
|
type: String,
|
|
default: void 0,
|
|
validator: (e) => ["left", "centered", "right"].indexOf(e) >= 0
|
|
},
|
|
/**
|
|
* Tab type
|
|
* @values boxed, toggle
|
|
*/
|
|
type: { type: String, default: () => i("tabs.type", "default") },
|
|
/** Tabs will be expanded (full-width) */
|
|
expanded: { type: Boolean, default: !1 },
|
|
/** Destroy tabItem on hide */
|
|
destroyOnHide: { type: Boolean, default: !1 },
|
|
/** Tab will have an animation */
|
|
animated: {
|
|
type: Boolean,
|
|
default: () => i("tabs.animated", !0)
|
|
},
|
|
/**
|
|
* Transition animation name
|
|
* @values [next, prev], [right, left, down, up]
|
|
*/
|
|
animation: {
|
|
type: Array,
|
|
default: () => i("tabs.animation", [
|
|
"slide-next",
|
|
"slide-prev",
|
|
"slide-down",
|
|
"slide-up"
|
|
]),
|
|
validator: (e) => e.length === 2 || e.length === 4
|
|
},
|
|
/** Apply animation on the initial render */
|
|
animateInitially: {
|
|
type: Boolean,
|
|
default: () => i("tabs.animateInitially", !1)
|
|
},
|
|
/** Show tab items multiline when there is no space */
|
|
multiline: { type: Boolean, default: !1 },
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of Tabs component when when is vertical and its position changes */
|
|
positionClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of Tabs component when expanded */
|
|
expandedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of Tabs component when vertical */
|
|
verticalClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of Tabs component when multiline */
|
|
multilineClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Tabs component nav tabs */
|
|
navTabsClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Size of the navigation */
|
|
navSizeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Tabs component nav position */
|
|
navPositionClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Type of the navigation */
|
|
navTypeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the tab content */
|
|
contentClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the tab content when transitioning */
|
|
transitioningClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the tab item wrapper */
|
|
itemWrapperClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
}, {
|
|
modelValue: {},
|
|
modelModifiers: {}
|
|
}),
|
|
emits: /* @__PURE__ */ Be(["update:modelValue", "change"], ["update:modelValue"]),
|
|
setup(e, { emit: l }) {
|
|
const a = e, t = l, o = z(), r = n(() => ({
|
|
activeValue: y.value,
|
|
type: a.type,
|
|
vertical: a.vertical,
|
|
animated: a.animated,
|
|
animation: a.animation,
|
|
animateInitially: a.animateInitially,
|
|
destroyOnHide: a.destroyOnHide
|
|
})), { sortedItems: u } = gt(o, {
|
|
data: r
|
|
}), c = n(
|
|
() => u.value.map((O) => ({
|
|
index: O.index,
|
|
identifier: O.identifier,
|
|
...vt(O.data)
|
|
}))
|
|
), y = Ee(e, "modelValue");
|
|
fe(
|
|
() => a.modelValue,
|
|
(O) => {
|
|
y.value !== O && V(O);
|
|
}
|
|
);
|
|
const d = n(
|
|
() => nt(y.value) && c.value.find((O) => O.value === y.value) || c.value[0]
|
|
), v = n(() => d.value.index);
|
|
function m(O) {
|
|
return O.value === d.value.value;
|
|
}
|
|
const k = n(
|
|
() => c.value.some((O) => O.isTransitioning)
|
|
);
|
|
function b(O) {
|
|
y.value !== O.value && V(O.value);
|
|
}
|
|
function F() {
|
|
const O = Wt(v.value + 1, c.value.length);
|
|
p(O, !0);
|
|
}
|
|
function B() {
|
|
const O = Wt(v.value - 1, c.value.length);
|
|
p(O, !1);
|
|
}
|
|
function S() {
|
|
c.value.length < 1 || p(0, !0);
|
|
}
|
|
function C() {
|
|
c.value.length < 1 || p(c.value.length - 1, !1);
|
|
}
|
|
function p(O, D) {
|
|
const M = D ? 1 : -1;
|
|
let Y = O;
|
|
for (; Y !== v.value && !(c.value[Y].visible && !c.value[Y].disabled); Y = Wt(Y + M, c.value.length))
|
|
;
|
|
b(c.value[Y]);
|
|
}
|
|
function V(O) {
|
|
const D = y.value, M = d.value, Y = c.value.find((J) => J.value === O) || c.value[0];
|
|
M && Y && (M.deactivate(Y.index), Y.activate(M.index)), xe(() => {
|
|
y.value = O, t("change", O, D);
|
|
});
|
|
}
|
|
const T = h(
|
|
["rootClass", "o-tabs"],
|
|
[
|
|
"positionClass",
|
|
"o-tabs--",
|
|
n(() => a.position),
|
|
n(() => a.position && a.vertical)
|
|
],
|
|
[
|
|
"expandedClass",
|
|
"o-tabs--fullwidth",
|
|
null,
|
|
n(() => a.expanded)
|
|
],
|
|
["verticalClass", "o-tabs--vertical", null, n(() => a.vertical)],
|
|
[
|
|
"multilineClass",
|
|
"o-tabs--multiline",
|
|
null,
|
|
n(() => a.multiline)
|
|
]
|
|
), I = h([
|
|
"itemWrapperClass",
|
|
"o-tabs__nav-item-wrapper"
|
|
]), E = h(
|
|
["navTabsClass", "o-tabs__nav"],
|
|
[
|
|
"navSizeClass",
|
|
"o-tabs__nav--",
|
|
n(() => a.size),
|
|
n(() => !!a.size)
|
|
],
|
|
[
|
|
"navPositionClass",
|
|
"o-tabs__nav--",
|
|
n(() => a.position),
|
|
n(() => a.position && !a.vertical)
|
|
],
|
|
[
|
|
"navTypeClass",
|
|
"o-tabs__nav--",
|
|
n(() => a.type),
|
|
n(() => !!a.type)
|
|
]
|
|
), K = h(
|
|
["contentClass", "o-tabs__content"],
|
|
[
|
|
"transitioningClass",
|
|
"o-tabs__content--transitioning",
|
|
null,
|
|
k
|
|
]
|
|
);
|
|
function te(O) {
|
|
const D = h(
|
|
["itemHeaderClass", "o-tabs__nav-item"],
|
|
["itemHeaderTypeClass", "o-tabs__nav-item-", a.type, !!a.type],
|
|
[
|
|
"itemHeaderActiveClass",
|
|
"o-tabs__nav-item-{*}--active",
|
|
a.type,
|
|
m(O)
|
|
],
|
|
[
|
|
"itemHeaderDisabledClass",
|
|
"o-tabs__nav-item-{*}--disabled",
|
|
a.type,
|
|
O.disabled
|
|
]
|
|
);
|
|
return [{ [O.headerClass || ""]: !0 }, ...D.value];
|
|
}
|
|
return (O, D) => (f(), $("div", {
|
|
ref_key: "rootRef",
|
|
ref: o,
|
|
class: P(s(T)),
|
|
"data-oruga": "tabs"
|
|
}, [
|
|
se("nav", {
|
|
class: P(s(E)),
|
|
role: "tablist",
|
|
"aria-orientation": e.vertical ? "vertical" : "horizontal"
|
|
}, [
|
|
Z(O.$slots, "start"),
|
|
(f(!0), $(ke, null, $e(c.value, (M) => Oe((f(), $("div", {
|
|
key: M.value,
|
|
class: P(s(I)),
|
|
role: "tab",
|
|
"aria-controls": `${M.value}-content`,
|
|
"aria-selected": m(M) ? "true" : "false"
|
|
}, [
|
|
M.$slots.header ? (f(), ie(s(Mt), {
|
|
key: 0,
|
|
component: M,
|
|
tag: M.tag,
|
|
name: "header",
|
|
class: P(te(M)),
|
|
onClick: (Y) => b(M),
|
|
onKeydown: [
|
|
he((Y) => b(M), ["enter"]),
|
|
he(ve(B, ["prevent"]), ["left"]),
|
|
he(ve(F, ["prevent"]), ["right"]),
|
|
he(ve(B, ["prevent"]), ["up"]),
|
|
he(ve(F, ["prevent"]), ["down"]),
|
|
he(ve(S, ["prevent"]), ["home"]),
|
|
he(ve(C, ["prevent"]), ["end"])
|
|
]
|
|
}, null, 8, ["component", "tag", "class", "onClick", "onKeydown"])) : (f(), ie(Ke(M.tag), {
|
|
key: 1,
|
|
role: "button",
|
|
tabindex: 0,
|
|
class: P(te(M)),
|
|
onClick: (Y) => b(M),
|
|
onKeydown: [
|
|
he((Y) => b(M), ["enter"]),
|
|
he(ve(B, ["prevent"]), ["left"]),
|
|
he(ve(F, ["prevent"]), ["right"]),
|
|
he(ve(B, ["prevent"]), ["up"]),
|
|
he(ve(F, ["prevent"]), ["down"]),
|
|
he(ve(S, ["prevent"]), ["home"]),
|
|
he(ve(C, ["prevent"]), ["end"])
|
|
]
|
|
}, {
|
|
default: ue(() => [
|
|
M.icon ? (f(), ie(Te, {
|
|
key: 0,
|
|
"root-class": s(Xe)(M.headerIconClasses),
|
|
icon: M.icon,
|
|
pack: M.iconPack,
|
|
size: e.size
|
|
}, null, 8, ["root-class", "icon", "pack", "size"])) : G("", !0),
|
|
se("span", {
|
|
class: P(M.headerTextClasses)
|
|
}, ce(M.label), 3)
|
|
]),
|
|
_: 2
|
|
}, 1064, ["class", "onClick", "onKeydown"]))
|
|
], 10, Ci)), [
|
|
[Ne, M.visible]
|
|
])), 128)),
|
|
Z(O.$slots, "end")
|
|
], 10, bi),
|
|
se("section", {
|
|
class: P(s(K))
|
|
}, [
|
|
Z(O.$slots, "default")
|
|
], 2)
|
|
], 2));
|
|
}
|
|
}), ki = ["data-id", "tabindex", "role"], Si = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OTabItem",
|
|
configField: "tabs",
|
|
inheritAttrs: !1,
|
|
__name: "TabItem",
|
|
props: {
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** Item value (it will be used as v-model of wrapper component) */
|
|
value: { type: [String, Number], default: () => ot() },
|
|
/** Item label */
|
|
label: { type: String, default: void 0 },
|
|
/** Item will be disabled */
|
|
disabled: { type: Boolean, default: !1 },
|
|
/** Icon on the left */
|
|
icon: {
|
|
type: String,
|
|
default: () => i("tabs.icon")
|
|
},
|
|
/** Icon pack */
|
|
iconPack: {
|
|
type: String,
|
|
default: () => i("tabs.iconPack")
|
|
},
|
|
/** Show/hide item */
|
|
visible: { type: Boolean, default: !0 },
|
|
/** Tabs item tag name */
|
|
tag: {
|
|
type: [String, Object, Function],
|
|
default: () => i("tabs.itemTag", "button")
|
|
},
|
|
/** Role attribute to be passed to the div wrapper for better accessibility. */
|
|
ariaRole: {
|
|
type: String,
|
|
default: () => i("tabs.ariaRole", "tab")
|
|
},
|
|
/** Sets a class to the item header */
|
|
headerClass: { type: String, default: void 0 },
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the tab item */
|
|
itemClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the tab item header */
|
|
itemHeaderClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the tab item header when active */
|
|
itemHeaderActiveClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the tab item header when disabled */
|
|
itemHeaderDisabledClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the tab item header type */
|
|
itemHeaderTypeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the tab item header icon */
|
|
itemHeaderIconClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the tab item header text */
|
|
itemHeaderTextClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
},
|
|
emits: ["activate", "deactivate"],
|
|
setup(e, { emit: l }) {
|
|
const a = e, t = l, o = Rt(), r = n(() => ({
|
|
...a,
|
|
$slots: o,
|
|
headerIconClasses: p.value,
|
|
headerTextClasses: V.value,
|
|
isTransitioning: v.value,
|
|
activate: b,
|
|
deactivate: F
|
|
})), { parent: u, item: c } = yt({
|
|
data: r
|
|
}), y = z(), d = n(() => Vt(a.value, u.value.activeValue)), v = z(!1), m = n(() => {
|
|
const T = u.value.vertical && u.value.animation.length === 4 ? 2 : 0;
|
|
return u.value.animation[T];
|
|
}), k = n(() => {
|
|
const T = u.value.vertical && u.value.animation.length === 4 ? 3 : 1;
|
|
return u.value.animation[T];
|
|
});
|
|
function b(T) {
|
|
y.value = c.value.index < T ? m.value : k.value, t("activate");
|
|
}
|
|
function F(T) {
|
|
y.value = T < c.value.index ? m.value : k.value, t("deactivate");
|
|
}
|
|
function B() {
|
|
v.value = !0;
|
|
}
|
|
function S() {
|
|
v.value = !0;
|
|
}
|
|
const C = h(["itemClass", "o-tab-item__content"]), p = h([
|
|
"itemHeaderIconClass",
|
|
"o-tabs__nav-item-icon"
|
|
]), V = h([
|
|
"itemHeaderTextClass",
|
|
"o-tabs__nav-item-text"
|
|
]);
|
|
return (T, I) => (f(), ie(tt, {
|
|
css: s(u).animated,
|
|
name: y.value,
|
|
appear: s(u).animateInitially,
|
|
onAfterEnter: B,
|
|
onBeforeLeave: S
|
|
}, {
|
|
default: ue(() => [
|
|
!s(u).destroyOnHide || d.value && e.visible ? Oe((f(), $("div", ye({
|
|
key: 0,
|
|
ref: "rootRef"
|
|
}, T.$attrs, {
|
|
class: s(C),
|
|
"data-id": `tabs-${s(c).identifier}`,
|
|
"data-oruga": "tabs-item",
|
|
tabindex: d.value ? 0 : -1,
|
|
role: e.ariaRole,
|
|
"aria-roledescription": "item"
|
|
}), [
|
|
Z(T.$slots, "default")
|
|
], 16, ki)), [
|
|
[Ne, d.value && e.visible]
|
|
]) : G("", !0)
|
|
]),
|
|
_: 3
|
|
}, 8, ["css", "name", "appear"]));
|
|
}
|
|
}), Fi = {
|
|
install(e) {
|
|
Fe(e, hi), Fe(e, Si);
|
|
}
|
|
}, Ai = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OTaginput",
|
|
configField: "taginput",
|
|
inheritAttrs: !1,
|
|
__name: "Taginput",
|
|
props: /* @__PURE__ */ Be({
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** @model */
|
|
modelValue: { type: Array, default: () => [] },
|
|
/** Items data */
|
|
data: { type: Array, default: () => [] },
|
|
/** Property of the object (if data is array of objects) to use as display text */
|
|
field: { type: String, default: "value" },
|
|
/** Property of the object (if `data` is array of objects) to use as display text of group */
|
|
groupField: { type: String, default: void 0 },
|
|
/** Property of the object (if `data` is array of objects) to use as key to get items array of each group */
|
|
groupOptions: { type: String, default: void 0 },
|
|
/**
|
|
* Vertical size of the input control
|
|
* @values small, medium, large
|
|
*/
|
|
size: {
|
|
type: String,
|
|
default: () => i("taginput.size")
|
|
},
|
|
/**
|
|
* Color of the each item
|
|
* @values primary, info, success, warning, danger, and any other custom color
|
|
*/
|
|
variant: {
|
|
type: String,
|
|
default: () => i("taginput.variant")
|
|
},
|
|
/** Limits the number of items, plus item counter */
|
|
maxitems: { type: [String, Number], default: void 0 },
|
|
/** Same as native maxlength, plus character counter */
|
|
maxlength: { type: [String, Number], default: void 0 },
|
|
/** Show counter when maxlength or maxtags props are passed */
|
|
counter: {
|
|
type: Boolean,
|
|
default: () => i("taginput.counter", !0)
|
|
},
|
|
/** Opens a dropdown with choices when the input field is focused */
|
|
openOnFocus: { type: Boolean, default: !1 },
|
|
/** Keep open dropdown list after select */
|
|
keepOpen: {
|
|
type: Boolean,
|
|
default: () => i("autocomplete.keepOpen", !1)
|
|
},
|
|
/** Input placeholder */
|
|
placeholder: { type: String, default: void 0 },
|
|
/** Makes input full width when inside a grouped or addon field */
|
|
expanded: { type: Boolean, default: !1 },
|
|
/** Same as native input disabled */
|
|
disabled: { type: Boolean, default: !1 },
|
|
/**
|
|
* Array of keys
|
|
* (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)
|
|
* which will add a item when typing
|
|
*/
|
|
confirmKeys: {
|
|
type: Array,
|
|
default: () => i("taginput.confirmKeys", [",", "Tab", "Enter"])
|
|
},
|
|
/** Array of chars used to split when pasting a new string */
|
|
separators: {
|
|
type: Array,
|
|
default: () => i("taginput.separators", [","])
|
|
},
|
|
/** The first option will always be pre-selected (easier to just hit enter or tab) */
|
|
keepFirst: { type: Boolean, default: !1 },
|
|
/** When autocomplete, it allow to add new items */
|
|
allowNew: { type: Boolean, default: !1 },
|
|
/** Allows adding the same item multiple time */
|
|
allowDuplicates: { type: Boolean, default: !1 },
|
|
/** Add autocomplete feature (if true, any Autocomplete props may be used too) */
|
|
allowAutocomplete: { type: Boolean, default: !1 },
|
|
/** Allow removing last item when pressing given keys, if input is empty */
|
|
removeOnKeys: {
|
|
type: Array,
|
|
default: () => i("taginput.removeOnKeys", ["Backspace"])
|
|
},
|
|
/** Function to validate the value of the item before adding */
|
|
beforeAdding: {
|
|
type: Function,
|
|
default: () => !0
|
|
},
|
|
/** Function to create a new item to push into v-model (items) */
|
|
createItem: {
|
|
type: Function,
|
|
default: (e) => e
|
|
},
|
|
/** Makes the component check if list reached scroll start or end and emit scroll events. */
|
|
checkScroll: {
|
|
type: Boolean,
|
|
default: () => i("taginput.checkScroll", !1)
|
|
},
|
|
/** Add close/delete button to the item */
|
|
closable: {
|
|
type: Boolean,
|
|
default: () => i("taginput.closable", !0)
|
|
},
|
|
/**
|
|
* Icon pack to use
|
|
* @values mdi, fa, fas and any other custom icon pack
|
|
*/
|
|
iconPack: {
|
|
type: String,
|
|
default: () => i("taginput.iconPack")
|
|
},
|
|
/** Icon to be shown */
|
|
icon: {
|
|
type: String,
|
|
default: () => i("taginput.icon")
|
|
},
|
|
/** Icon name of close icon on selected item */
|
|
closeIcon: {
|
|
type: String,
|
|
default: () => i("taginput.closeIcon", "close")
|
|
},
|
|
/** Accessibility label for the close button */
|
|
ariaCloseLabel: {
|
|
type: String,
|
|
default: () => i("taginput.ariaCloseLabel")
|
|
},
|
|
/** Native options to use in HTML5 validation */
|
|
autocomplete: {
|
|
type: String,
|
|
default: () => i("taginput.autocomplete", "off")
|
|
},
|
|
/** Enable html 5 native validation */
|
|
useHtml5Validation: {
|
|
type: Boolean,
|
|
default: () => i("useHtml5Validation", !0)
|
|
},
|
|
/** The message which is shown when a validation error occurs */
|
|
validationMessage: { type: String, default: void 0 },
|
|
/**
|
|
* Append the component to another part of the DOM.
|
|
* Set `true` to append the component to the body.
|
|
* In addition, any CSS selector string or an actual DOM node can be used.
|
|
*/
|
|
teleport: {
|
|
type: [Boolean, String, Object],
|
|
default: () => i("taginput.teleport", !1)
|
|
},
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of input when expanded */
|
|
expandedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the input container */
|
|
containerClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the input container size */
|
|
sizeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the entered item variant */
|
|
variantClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the close button of entered item */
|
|
closeClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the entered item */
|
|
itemClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the counter element */
|
|
counterClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/**
|
|
* Class configuration for the underlying autocomplete component
|
|
* @ignore
|
|
*/
|
|
autocompleteClasses: {
|
|
type: Object,
|
|
default: () => i("taginput.autocompleteClasses", {})
|
|
}
|
|
}, {
|
|
modelValue: { default: () => [] },
|
|
modelModifiers: {}
|
|
}),
|
|
emits: /* @__PURE__ */ Be(["update:modelValue", "input", "add", "remove", "focus", "blur", "invalid", "icon-click", "icon-right-click", "scroll-start", "scroll-end"], ["update:modelValue"]),
|
|
setup(e, { expose: l, emit: a }) {
|
|
const t = e, o = a, r = z(), u = Ee(e, "modelValue"), { setFocus: c, onFocus: y, onBlur: d, onInvalid: v } = rt(
|
|
r,
|
|
o,
|
|
t
|
|
), m = z(""), k = z(!1), b = n(() => m.value.trim().length), F = n(() => u.value.length), B = n(
|
|
() => t.maxitems == null || F.value < Number(t.maxitems)
|
|
);
|
|
Ha(() => {
|
|
B.value || d();
|
|
});
|
|
const S = n(
|
|
() => t.separators.length ? new RegExp(
|
|
t.separators.map(
|
|
(x) => x ? x.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&") : null
|
|
).join("|"),
|
|
"g"
|
|
) : null
|
|
);
|
|
function C(x) {
|
|
return typeof x == "object" && (x = ze(x, t.field)), `${x}`;
|
|
}
|
|
function p(x) {
|
|
if (x = x || m.value.trim(), x) {
|
|
if (typeof x == "string") {
|
|
const N = S.value;
|
|
if (N && x.match(N)) {
|
|
x.split(N).map((L) => L.trim()).filter((L) => L.length !== 0).map(p);
|
|
return;
|
|
}
|
|
}
|
|
const R = t.createItem(x);
|
|
(t.allowDuplicates ? !0 : u.value.indexOf(R) === -1) && t.beforeAdding(x) && (u.value = [...u.value, R], o("add", R));
|
|
}
|
|
requestAnimationFrame(() => {
|
|
m.value = "", o("input", m.value);
|
|
});
|
|
}
|
|
function V(x, R) {
|
|
const _ = u.value.at(x);
|
|
u.value = u.value.toSpliced(x, 1), o("remove", _), R && R.stopPropagation(), t.openOnFocus && r.value && c();
|
|
}
|
|
function T(x) {
|
|
x && (p(x), xe(() => m.value = ""));
|
|
}
|
|
function I(x) {
|
|
var R;
|
|
if (t.removeOnKeys.indexOf(x.key) !== -1 && !((R = m.value) != null && R.length) && F.value > 0 && V(F.value - 1), !(t.allowAutocomplete && !t.allowNew) && t.confirmKeys.indexOf(x.key) >= 0) {
|
|
if (x.key !== "Tab" && x.preventDefault(), x.key === "Enter" && k.value)
|
|
return;
|
|
p();
|
|
}
|
|
}
|
|
function E(x) {
|
|
o("input", String(x).trim());
|
|
}
|
|
function K(x) {
|
|
t.allowAutocomplete || p(), d(x);
|
|
}
|
|
const te = da(), O = h([
|
|
"autocompleteClasses.rootClass",
|
|
"o-taginput__autocomplete"
|
|
]), D = h([
|
|
"autocompleteClasses.inputClasses.inputClass",
|
|
"o-taginput__input"
|
|
]), M = n(() => ({
|
|
...te,
|
|
"root-class": Xe(O.value),
|
|
"input-classes": {
|
|
"input-class": Xe(D.value)
|
|
},
|
|
...t.autocompleteClasses
|
|
})), Y = h(
|
|
["rootClass", "o-taginput"],
|
|
[
|
|
"expandedClass",
|
|
"o-taginput--expanded",
|
|
null,
|
|
n(() => t.expanded)
|
|
]
|
|
), J = h(
|
|
["containerClass", "o-taginput__container"],
|
|
[
|
|
"sizeClass",
|
|
"o-taginput__container--",
|
|
n(() => t.size),
|
|
n(() => !!t.size)
|
|
]
|
|
), j = h(
|
|
["itemClass", "o-taginput__item"],
|
|
[
|
|
"variantClass",
|
|
"o-taginput__item--",
|
|
n(() => t.variant),
|
|
n(() => !!t.variant)
|
|
]
|
|
), g = h(["closeClass", "o-taginput__item__close"]), w = h(["counterClass", "o-taginput__counter"]);
|
|
return l({ focus: c }), (x, R) => (f(), $("div", {
|
|
"data-oruga": "taginput",
|
|
class: P(s(Y))
|
|
}, [
|
|
se("div", {
|
|
class: P(s(J)),
|
|
onFocus: R[7] || (R[7] = //@ts-ignore
|
|
(..._) => s(y) && s(y)(..._)),
|
|
onBlur: R[8] || (R[8] = //@ts-ignore
|
|
(..._) => s(d) && s(d)(..._))
|
|
}, [
|
|
Z(x.$slots, "selected", {
|
|
items: u.value,
|
|
removeItem: V
|
|
}, () => [
|
|
(f(!0), $(ke, null, $e(u.value, (_, N) => (f(), $("span", {
|
|
key: C(_) + N,
|
|
class: P(s(j))
|
|
}, [
|
|
se("span", null, ce(C(_)), 1),
|
|
e.closable ? (f(), ie(Te, {
|
|
key: 0,
|
|
class: P(s(g)),
|
|
clickable: "",
|
|
pack: e.iconPack,
|
|
icon: e.closeIcon,
|
|
"aria-label": e.ariaCloseLabel,
|
|
both: "",
|
|
onClick: (L) => V(N, L)
|
|
}, null, 8, ["class", "pack", "icon", "aria-label", "onClick"])) : G("", !0)
|
|
], 2))), 128))
|
|
]),
|
|
Oe(me(Za, ye({
|
|
ref_key: "autocompleteRef",
|
|
ref: r,
|
|
modelValue: m.value,
|
|
"onUpdate:modelValue": R[0] || (R[0] = (_) => m.value = _)
|
|
}, M.value, {
|
|
data: e.data,
|
|
field: e.field,
|
|
icon: e.icon,
|
|
"icon-pack": e.iconPack,
|
|
maxlength: e.maxlength,
|
|
size: e.size,
|
|
disabled: e.disabled,
|
|
autocomplete: e.autocomplete,
|
|
"open-on-focus": e.openOnFocus,
|
|
"keep-first": e.keepFirst,
|
|
"keep-open": e.keepOpen,
|
|
"group-field": e.groupField,
|
|
"group-options": e.groupOptions,
|
|
"has-counter": !1,
|
|
"use-html5-validation": e.useHtml5Validation,
|
|
"check-scroll": e.checkScroll,
|
|
teleport: e.teleport,
|
|
"confirm-keys": e.confirmKeys,
|
|
placeholder: e.placeholder,
|
|
"validation-message": e.validationMessage,
|
|
expanded: e.expanded,
|
|
onInput: E,
|
|
onFocus: s(y),
|
|
onBlur: K,
|
|
onInvalid: s(v),
|
|
onKeydown: I,
|
|
onCompositionstart: R[1] || (R[1] = (_) => k.value = !0),
|
|
onCompositionend: R[2] || (R[2] = (_) => k.value = !1),
|
|
onSelect: T,
|
|
onScrollStart: R[3] || (R[3] = (_) => x.$emit("scroll-start")),
|
|
onScrollEnd: R[4] || (R[4] = (_) => x.$emit("scroll-end")),
|
|
onIconClick: R[5] || (R[5] = (_) => x.$emit("icon-click", _)),
|
|
onIconRightClick: R[6] || (R[6] = (_) => x.$emit("icon-right-click", _))
|
|
}), It({ _: 2 }, [
|
|
x.$slots.header ? {
|
|
name: "header",
|
|
fn: ue(() => [
|
|
Z(x.$slots, "header")
|
|
]),
|
|
key: "0"
|
|
} : void 0,
|
|
x.$slots.default ? {
|
|
name: "default",
|
|
fn: ue((_) => [
|
|
Z(x.$slots, "default", {
|
|
option: _.option,
|
|
index: _.index,
|
|
value: _.value
|
|
})
|
|
]),
|
|
key: "1"
|
|
} : void 0,
|
|
x.$slots.empty ? {
|
|
name: "empty",
|
|
fn: ue(() => [
|
|
Z(x.$slots, "empty")
|
|
]),
|
|
key: "2"
|
|
} : void 0,
|
|
x.$slots.footer ? {
|
|
name: "footer",
|
|
fn: ue(() => [
|
|
Z(x.$slots, "footer")
|
|
]),
|
|
key: "3"
|
|
} : void 0
|
|
]), 1040, ["modelValue", "data", "field", "icon", "icon-pack", "maxlength", "size", "disabled", "autocomplete", "open-on-focus", "keep-first", "keep-open", "group-field", "group-options", "use-html5-validation", "check-scroll", "teleport", "confirm-keys", "placeholder", "validation-message", "expanded", "onFocus", "onInvalid"]), [
|
|
[Ne, B.value]
|
|
])
|
|
], 34),
|
|
e.counter && (e.maxitems || e.maxlength) ? (f(), $("small", {
|
|
key: 0,
|
|
class: P(s(w))
|
|
}, [
|
|
e.maxlength && b.value > 0 ? Z(x.$slots, "counter", {
|
|
key: 0,
|
|
items: b.value,
|
|
total: e.maxlength
|
|
}, () => [
|
|
Ve(ce(b.value) + " / " + ce(e.maxlength), 1)
|
|
]) : e.maxitems ? Z(x.$slots, "counter", {
|
|
key: 1,
|
|
items: F.value,
|
|
total: e.maxitems
|
|
}, () => [
|
|
Ve(ce(F.value) + " / " + ce(e.maxitems), 1)
|
|
]) : G("", !0)
|
|
], 2)) : G("", !0)
|
|
], 2));
|
|
}
|
|
}), wi = {
|
|
install(e) {
|
|
Fe(e, Ai);
|
|
}
|
|
}, Di = {
|
|
install(e) {
|
|
Fe(e, tl);
|
|
}
|
|
}, xi = {
|
|
install(e) {
|
|
Fe(e, ol);
|
|
}
|
|
}, $i = ["multiple", "accept", "disabled"], Bi = /* @__PURE__ */ be({
|
|
isOruga: !0,
|
|
name: "OUpload",
|
|
configField: "upload",
|
|
inheritAttrs: !1,
|
|
__name: "Upload",
|
|
props: /* @__PURE__ */ Be({
|
|
/** Override existing theme classes completely */
|
|
override: { type: Boolean, default: void 0 },
|
|
/** @model */
|
|
modelValue: {
|
|
type: [Object, Array],
|
|
default: void 0
|
|
},
|
|
/** Same as native, also push new item to v-model instead of replacing */
|
|
multiple: { type: Boolean, default: !1 },
|
|
/**
|
|
* Color of the control
|
|
* @values primary, info, success, warning, danger, and any other custom color
|
|
*/
|
|
variant: {
|
|
type: String,
|
|
default: () => i("upload.variant")
|
|
},
|
|
/** Same as native disabled */
|
|
disabled: { type: Boolean, default: !1 },
|
|
/** Same as native accept */
|
|
accept: { type: String, default: void 0 },
|
|
/** Accepts drag & drop and change its style */
|
|
dragDrop: { type: Boolean, default: !1 },
|
|
/** Upload will be expanded (full-width) */
|
|
expanded: { type: Boolean, default: !1 },
|
|
/** Replace last chosen files every time (like native file input element) */
|
|
native: { type: Boolean, default: !0 },
|
|
/** Enable html 5 native validation */
|
|
useHtml5Validation: {
|
|
type: Boolean,
|
|
default: () => i("useHtml5Validation", !0)
|
|
},
|
|
/** The message which is shown when a validation error occurs */
|
|
validationMessage: { type: String, default: void 0 },
|
|
// class props (will not be displayed in the docs)
|
|
/** Class of the root element */
|
|
rootClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Upload when draggable */
|
|
draggableClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Upload variant */
|
|
variantClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Upload when expanded */
|
|
expandedClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Upload when disabled */
|
|
disabledClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
},
|
|
/** Class of the Upload when hovered */
|
|
hoveredClass: {
|
|
type: [String, Array, Function],
|
|
default: void 0
|
|
}
|
|
}, {
|
|
modelValue: {},
|
|
modelModifiers: {}
|
|
}),
|
|
emits: /* @__PURE__ */ Be(["update:modelValue", "focus", "blur", "invalid"], ["update:modelValue"]),
|
|
setup(e, { expose: l, emit: a }) {
|
|
const t = e, o = a, r = z(), u = Ee(e, "modelValue"), { checkHtml5Validity: c, onFocus: y, onBlur: d, isValid: v, setFocus: m } = rt(r, o, t), k = z(!1);
|
|
fe(u, (T) => {
|
|
(!T || Array.isArray(T) && T.length === 0) && (r.value.value = null), !v.value && !t.dragDrop && c();
|
|
});
|
|
function b(T) {
|
|
if (t.disabled)
|
|
return;
|
|
t.dragDrop && B(!1);
|
|
const I = T.target.files || T.dataTransfer.files;
|
|
if (I.length === 0) {
|
|
if (!u.value)
|
|
return;
|
|
t.native && (u.value = null);
|
|
}
|
|
if (t.multiple) {
|
|
const E = t.native || !u.value || !Array.isArray(u.value) ? [] : [...u.value];
|
|
for (let K = 0; K < I.length; K++) {
|
|
const te = I[K];
|
|
S(te) && E.push(te);
|
|
}
|
|
u.value = E;
|
|
} else {
|
|
if (t.dragDrop && I.length !== 1)
|
|
return;
|
|
{
|
|
const E = I[0];
|
|
if (S(E))
|
|
u.value = E;
|
|
else if (u.value)
|
|
u.value = null, F();
|
|
else {
|
|
F(), c();
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
t.dragDrop || c();
|
|
}
|
|
function F() {
|
|
r.value.value = null;
|
|
}
|
|
function B(T) {
|
|
t.disabled || (k.value = T);
|
|
}
|
|
function S(T) {
|
|
if (!t.accept)
|
|
return !0;
|
|
const I = t.accept.split(",");
|
|
if (I.length === 0)
|
|
return !0;
|
|
for (let E = 0; E < I.length; E++) {
|
|
const K = I[E].trim();
|
|
if (K) {
|
|
if (K.substring(0, 1) === ".") {
|
|
if (T.name.toLowerCase().slice(-K.length) === K.toLowerCase())
|
|
return !0;
|
|
} else if (T.type.match(K))
|
|
return !0;
|
|
}
|
|
}
|
|
return !1;
|
|
}
|
|
function C(T) {
|
|
t.disabled || t.dragDrop || (T.preventDefault(), r.value.click());
|
|
}
|
|
const p = h(
|
|
["rootClass", "o-upl"],
|
|
["expandedClass", "o-upl--expanded", null, n(() => t.expanded)],
|
|
["disabledClass", "o-upl--disabled", null, n(() => t.disabled)]
|
|
), V = h(
|
|
["draggableClass", "o-upl__draggable"],
|
|
[
|
|
"hoveredClass",
|
|
"o-upl__draggable--hovered",
|
|
null,
|
|
n(() => !t.variant && k.value)
|
|
],
|
|
[
|
|
"variantClass",
|
|
"o-upl__draggable--hovered-",
|
|
n(() => t.variant),
|
|
n(() => t.variant && k.value)
|
|
]
|
|
);
|
|
return l({ focus: m }), (T, I) => (f(), $("label", {
|
|
class: P(s(p)),
|
|
"data-oruga": "upload"
|
|
}, [
|
|
e.dragDrop ? (f(), $("div", {
|
|
key: 1,
|
|
class: P(s(V)),
|
|
role: "button",
|
|
tabindex: "0",
|
|
onMouseenter: I[0] || (I[0] = (E) => B(!0)),
|
|
onMouseleave: I[1] || (I[1] = (E) => B(!1)),
|
|
onDragover: I[2] || (I[2] = ve((E) => B(!0), ["prevent"])),
|
|
onDragleave: I[3] || (I[3] = ve((E) => B(!1), ["prevent"])),
|
|
onDragenter: I[4] || (I[4] = ve((E) => B(!0), ["prevent"])),
|
|
onDrop: ve(b, ["prevent"])
|
|
}, [
|
|
Z(T.$slots, "default")
|
|
], 34)) : Z(T.$slots, "default", {
|
|
key: 0,
|
|
onclick: C
|
|
}),
|
|
se("input", ye(T.$attrs, {
|
|
ref_key: "inputRef",
|
|
ref: r,
|
|
type: "file",
|
|
"data-oruga-input": "file",
|
|
multiple: e.multiple,
|
|
accept: e.accept,
|
|
disabled: e.disabled,
|
|
onChange: b,
|
|
onFocus: I[5] || (I[5] = //@ts-ignore
|
|
(...E) => s(y) && s(y)(...E)),
|
|
onBlur: I[6] || (I[6] = //@ts-ignore
|
|
(...E) => s(d) && s(d)(...E))
|
|
}), null, 16, $i)
|
|
], 2));
|
|
}
|
|
}), Oi = {
|
|
install(e) {
|
|
Fe(e, Bi);
|
|
}
|
|
}, Va = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
__proto__: null,
|
|
Autocomplete: pn,
|
|
Button: mn,
|
|
Carousel: hn,
|
|
Checkbox: Fn,
|
|
Collapse: Dn,
|
|
Datepicker: Yn,
|
|
Datetimepicker: _n,
|
|
Dropdown: eo,
|
|
Field: to,
|
|
Icon: ao,
|
|
Input: lo,
|
|
Loading: io,
|
|
Menu: fo,
|
|
Modal: go,
|
|
Notification: Ao,
|
|
Pagination: wo,
|
|
Radio: Bo,
|
|
Select: Oo,
|
|
Sidebar: Ro,
|
|
Skeleton: Mo,
|
|
Slider: No,
|
|
Steps: Ko,
|
|
Switch: Go,
|
|
Table: gi,
|
|
Tabs: Fi,
|
|
Taginput: wi,
|
|
Timepicker: Di,
|
|
Tooltip: xi,
|
|
Upload: Oi
|
|
}, Symbol.toStringTag, { value: "Module" })), Vi = {
|
|
install(e, l = {}) {
|
|
e.use(Xl, l);
|
|
for (const a in Va)
|
|
Kl(e, Va[a]);
|
|
Ht(e, "config", ql);
|
|
}
|
|
};
|
|
export {
|
|
pn as Autocomplete,
|
|
mn as Button,
|
|
hn as Carousel,
|
|
Fn as Checkbox,
|
|
Dn as Collapse,
|
|
Xl as ConfigPlugin,
|
|
ql as ConfigProgrammatic,
|
|
Yn as Datepicker,
|
|
_n as Datetimepicker,
|
|
eo as Dropdown,
|
|
to as Field,
|
|
ao as Icon,
|
|
lo as Input,
|
|
io as Loading,
|
|
oo as LoadingProgrammatic,
|
|
fo as Menu,
|
|
go as Modal,
|
|
yo as ModalProgrammatic,
|
|
Ao as Notification,
|
|
Fo as NotificationProgrammatic,
|
|
Za as OAutocomplete,
|
|
At as OButton,
|
|
gn as OCarousel,
|
|
Cn as OCarouselItem,
|
|
Pt as OCheckbox,
|
|
wn as OCollapse,
|
|
el as ODatepicker,
|
|
Zn as ODatetimepicker,
|
|
va as ODropdown,
|
|
Ct as ODropdownItem,
|
|
qa as OField,
|
|
Te as OIcon,
|
|
Ft as OInput,
|
|
ya as OLoading,
|
|
ro as OMenu,
|
|
co as OMenuItem,
|
|
al as OModal,
|
|
ho as ONotification,
|
|
ll as OPagination,
|
|
$o as ORadio,
|
|
pt as OSelect,
|
|
nl as OSidebar,
|
|
Po as OSkeleton,
|
|
Ho as OSlider,
|
|
il as OSliderTick,
|
|
Yo as OStepItem,
|
|
jo as OSteps,
|
|
Xo as OSwitch,
|
|
Si as OTabItem,
|
|
yi as OTable,
|
|
sl as OTableColumn,
|
|
hi as OTabs,
|
|
Ai as OTaginput,
|
|
tl as OTimepicker,
|
|
ol as OTooltip,
|
|
Bi as OUpload,
|
|
Vi as Oruga,
|
|
Xl as OrugaConfig,
|
|
wo as Pagination,
|
|
Bo as Radio,
|
|
Oo as Select,
|
|
Ro as Sidebar,
|
|
To as SidebarProgrammatic,
|
|
Mo as Skeleton,
|
|
No as Slider,
|
|
Ko as Steps,
|
|
Go as Switch,
|
|
gi as Table,
|
|
Fi as Tabs,
|
|
wi as Taginput,
|
|
Di as Timepicker,
|
|
xi as Tooltip,
|
|
Oi as Upload,
|
|
Vi as default,
|
|
Yl as useOruga
|
|
};
|
|
//# sourceMappingURL=oruga.mjs.map
|