@octavianlab/olab-ui
Version:
Octavianlab UX/UI components
198 lines (197 loc) • 6.69 kB
JavaScript
import { ref as _, onMounted as y, nextTick as $, watch as b, resolveComponent as v, openBlock as w, createBlock as x, withCtx as P, createElementVNode as B, toDisplayString as k, useCssVars as C } from "vue";
import { a as c, b as A } from "./vendor-55459b0e.js";
import d from "moment";
import { u as L } from "./okeycloak/okeycloakloginbutton-1e392998.js";
import { _ as S } from "./obannerbrowsersupport-8a97766f.js";
const D = {
data() {
return {
site: localStorage.getItem("site"),
isMobile: c("(max-width: 640px)"),
isTablet: c("(min-width: 641px) and (max-width: 991px)"),
isDesktop: c("(min-width: 992px)"),
currentPageName: this.$route.path.replaceAll("/", "") || "dashboard",
currentPath: this.$route.path
};
},
methods: {
// UTILITY
isButtonDisabled(e, a) {
return a.some((t) => e[t] == null || typeof e[t] == "string" && e[t].trim() === "");
},
imgUrl(e, a = "png") {
return e.startsWith("/") && e.replace("/", ""), `https://cdn.octavianlab.com/v3/bo/${this.site}/${e}.${a}`;
},
toast(e, a, t = 2700) {
let r;
typeof a == "string" ? r = this.$translate(`admin.toast.message.${a.toLowerCase()}`) : a.response ? r = `${a.response.data.code} - ${a.response.data.message}` : r = this.$translate("admin.generic.error"), this.$toast.add({
severity: e,
summary: this.$translate(`admin.toast.${e}.title`),
detail: r,
life: t
});
},
generateSelects(e, a, t, r = !1) {
const n = [];
if (!Array.isArray(e))
return console.warn("Generazione select impossibile non è un array o è un array vuoto: ", e), n;
for (let i of e)
n.push({
label: r === !0 ? this.$translate(i[t]) : i[t],
value: i[a]
});
return n;
},
doOpenConfirmDialog(e, a, t = `${this.$translate("admin.generic.confirm.remove.element")} : ${e} ?`, r = this.$translate("admin.generic.confirm"), n = this.$translate("admin.generic.yes")) {
this.$confirm.require({
header: r,
acceptLabel: n,
message: t,
icon: "fad fa-exclamation-triangle text-warning p-mr-3 animate__infinite animate__animated animate__heartBeat animate__slow",
accept: () => {
a(e);
}
});
},
isParsable(e) {
try {
return JSON.parse(e), !0;
} catch {
return !1;
}
},
getDtTemplate(e) {
switch (e) {
case "currentPageReport":
return `
${this.$translate("admin.generic.showing")} {first}
${this.$translate("admin.generic.showing.to")} {last}
${this.$translate("admin.generic.showing.of")} {totalRecords}`;
case "paginator":
return "CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown";
}
},
isTimedOut(e) {
const { cookies: a } = A(), t = L();
let r = a.get("lastApiCall");
const n = e || 20, i = d();
r || (r = i);
const u = d(r).add(n, "minutes");
let s = null;
if (t.getStorageData("isKeycloakAuth")) {
const o = t.decodeToken(t.getStorageData("getRefreshToken")).exp * 1e3;
s = o && i.isAfter(new Date(o));
} else
s = i.isAfter(u);
return s && (console.log("Uscita forzata; timeout superiore a 20 min."), console.log("NOW:", i.toDate()), console.log("LASTCALL:", r)), s;
},
getRandomColor() {
let e = "0123456789ABCDEF".split(""), a = "#";
for (let t = 0; t < 6; t++)
a += e[Math.floor(Math.random() * 16)];
return a;
}
// TODO
/*setTranslateKeyAttribute(prefix, name) {
return this.$translate(prefix + name, '', true)
.replaceAll('-', '')
.replaceAll(' ', '')
}*/
}
};
const m = {
name: "OProgressBar",
props: {
value: { type: Number, default: () => 0, required: !0 },
showValue: { type: Boolean, default: () => !1 },
imgFormat: { type: String, default: () => "png" },
imgPath: { type: String, required: !0 },
imgStyle: { type: Object },
borderRadius: { type: Boolean, default: () => !0 },
customColor: { type: Boolean, default: () => !1 },
shadowAnimation: { type: Boolean, default: () => !0 },
barAnimation: { type: Boolean, default: () => !0 }
},
setup(e) {
const a = e.borderRadius ? "1rem" : "0", t = _(null);
let r;
const n = e.customColor ? "var(--primary-color)" : "limegreen", i = () => {
const s = t.value.$el.querySelector(".p-progressbar-value"), o = document.createElement("img");
o.src = D.methods.imgUrl(e.imgPath, e.imgFormat), o.classList.add("o-progressbar__image");
const l = e.imgStyle || {
transform: "translate(50%, -50%)"
};
Object.assign(o.style, l), s.append(o);
}, u = () => {
const s = t.value.$el.querySelector(".p-progressbar-value");
let o = t.value.$el.offsetWidth;
if (e.shadowAnimation && (e.customColor ? s.classList.add("custom-animation") : s.classList.add("default-animation")), !e.barAnimation)
return;
r = document.createElement("div"), r.classList.add("o-progressbar__fx", "hidden"), s.append(r), o || (o = window.innerWidth * e.value / 100);
let l;
o > 1e3 ? l = 2500 : o > 500 ? l = 2e3 : l = 1500;
const p = [
{
left: "4px",
opacity: "0.1"
},
{
opacity: "0.5"
},
{
opacity: "0.5"
},
{
left: "calc(100% - 40px - 4px)",
opacity: "0.1"
}
], h = {
duration: l,
iterations: 1 / 0
};
r.animate(p, h);
};
return y(() => {
$(() => {
t.value && (i(), u(), e.barAnimation && b(
() => e.value,
(s) => {
s >= 10 && r.classList.remove("hidden");
},
{
immediate: !0
}
));
});
}), {
borderRadiusValue: a,
progressbarRef: t,
color: n
};
}
}, g = () => {
C((e) => ({
"09e66284": e.borderRadiusValue,
"36ddd66e": e.color
}));
}, f = m.setup;
m.setup = f ? (e, a) => (g(), f(e, a)) : g;
function R(e, a, t, r, n, i) {
const u = v("ProgressBar");
return w(), x(u, {
id: "o-progressbar",
ref: "progressbarRef",
value: t.value,
showValue: t.showValue && t.value >= 10
}, {
default: P(() => [
B("span", null, k(t.value.toFixed(0)) + " %", 1)
]),
_: 1
}, 8, ["value", "showValue"]);
}
const q = /* @__PURE__ */ S(m, [["render", R]]);
export {
q as O,
D as f
};