@octavianlab/olab-ui
Version:
Octavianlab UX/UI components
208 lines (207 loc) • 6.37 kB
JavaScript
import { resolveComponent as m, openBlock as d, createBlock as b, createSlots as _, withCtx as c, createElementVNode as r, createElementBlock as h, normalizeClass as f, createCommentVNode as y, toDisplayString as p } from "vue";
import { _ as k } from "./obannerbrowsersupport-8a97766f.js";
const w = {
name: "ODropdown",
data() {
return {
results: this.options
};
},
props: {
addZeroVal: { type: Boolean, required: !1, default: !1 },
autoUpdateSkins: { type: Number, required: !1 },
options: { type: [Array, String], required: !0 },
showClear: { type: Boolean, default: () => !0 },
prependValueOnLabel: { type: Boolean, default: () => !0 },
translator: { type: String, default: () => null },
icons: { type: Array, default: () => [] },
generateLanguageList: { type: Boolean, default: () => !1 }
},
watch: {
options: {
immediate: !0,
handler(e) {
if (typeof this.options == "string")
this.generateOptionsByType();
else {
const t = this.generateLanguageList ? !1 : this.prependValueOnLabel;
this.results = this.elaborate(e, this.translator, t);
}
}
},
autoUpdateSkins: {
immediate: !0,
handler(e) {
e && (this.results = this.elaborate(
this.generateSelects(
this.$store.getters.getSkinsByLicensee(e),
"id",
"description"
)
), this.handleZeroVisibilityInList());
}
}
},
methods: {
handleShowClear() {
return Array.isArray(this.options) || typeof this.options == "string" ? this.showClear : this.$store.getters.isAdminRoot ? !0 : this.results.length > 1;
},
handleZeroVisibilityInList() {
if (!(this.$store.getters.info.idSkin || !this.addZeroVal))
switch (this.options) {
case "licensees":
if (this.$store.getters.isAdminRoot)
this.addOptionsZeroVal();
else
return;
break;
case "skins":
case "sites":
this.addOptionsZeroVal();
break;
case "languages":
this.addOptionsZeroVal("WW");
break;
default:
return;
}
},
elaborate(e, t, a = !0) {
let n = [];
if (!Array.isArray(e))
return console.warn("Traduzione impossibile non è un array o è un array vuoto: ", n), n;
if (e.length === 0)
return n;
let l = !0;
typeof e[0] == "object" && (l = !1);
for (let i = 0; i < e.length; i++) {
const o = e[i];
let s = o.label, u = null;
l ? u = o : u = o.value, t && (s = this.$translate(t + "." + u)), a && (s = `${u} - ${s}`);
let g = null;
this.icons.length > 0 && (g = this.icons[i]), n.push({ label: s, value: u, icon: g });
}
return n;
},
addOptionsZeroVal(e = 0) {
const t = {
label: "0 - Default",
value: e
};
this.options === "languages" && (t.label = this.$translate("admin.language.worldwide")), this.results.findIndex((n) => n.value === t.value) === -1 && this.results.unshift(t);
},
valuesCalcLanguages({ value: e }) {
var n;
let t, a;
switch (e) {
case "WW":
t = "<i class='fad fa-globe fa-xl mx-2'></i>", a = this.$translate("admin.language.worldwide");
break;
default:
t = `<img class="flag flag-${e == null ? void 0 : e.toLowerCase()} mr-2" />`, a = (n = this.results.find((l) => l.value === e)) == null ? void 0 : n.label;
break;
}
return `${t}${a}`;
},
optionCalcLanguages(e) {
let t;
switch (e.value) {
case "WW":
t = "<i class='fad fa-globe fa-xl mr-2'></i>";
break;
default:
t = `<img class="flag flag-${e.value.toLowerCase()} mr-2" />`;
break;
}
return `${t}${e.label}`;
},
generateOptionsByType() {
let e = [], t = !0;
switch (this.options) {
case "languages":
e = [...this.$store.getters[this.options]], t = !1;
break;
case "licensees":
case "skins":
case "sites":
e = [...this.$store.getters[this.options]];
break;
}
this.results = this.elaborate(
this.generateSelects(e, "id", "description"),
this.translator,
t
), this.handleZeroVisibilityInList();
}
}
}, L = {
key: 0,
class: "icon"
}, v = ["innerHTML"], C = { key: 1 }, V = {
key: 0,
class: "icon"
}, O = ["innerHTML"];
function S(e, t, a, n, l, i) {
const o = m("Dropdown");
return d(), b(o, {
"show-clear": i.handleShowClear(),
filter: l.results.length > 2,
"option-value": "value",
"option-label": "label",
options: l.results,
placeholder: e.$translate("admin.generic.dropdown.placeholder"),
autoFilterFocus: !0
}, _({ _: 2 }, [
a.icons.length > 0 ? {
name: "value",
fn: c((s) => [
r("div", null, [
s.icon ? (d(), h("span", L, [
r("i", {
class: f(s.icon)
}, null, 2)
])) : y("", !0),
r("span", null, p(s.label), 1)
])
]),
key: "0"
} : void 0,
a.options === "languages" || a.generateLanguageList ? {
name: "value",
fn: c((s) => [
s.value != null ? (d(), h("span", {
key: 0,
innerHTML: i.valuesCalcLanguages(s)
}, null, 8, v)) : (d(), h("span", C, p(s.placeholder), 1))
]),
key: "1"
} : void 0,
a.icons.length > 0 ? {
name: "option",
fn: c(({ option: s }) => [
r("div", null, [
s.icon ? (d(), h("span", V, [
r("i", {
class: f(s.icon)
}, null, 2)
])) : y("", !0),
r("span", null, p(s.label), 1)
])
]),
key: "2"
} : void 0,
a.options === "languages" || a.generateLanguageList ? {
name: "option",
fn: c(({ option: s }) => [
r("span", {
innerHTML: i.optionCalcLanguages(s)
}, null, 8, O)
]),
key: "3"
} : void 0
]), 1032, ["show-clear", "filter", "options", "placeholder"]);
}
const x = /* @__PURE__ */ k(w, [["render", S], ["__scopeId", "data-v-dacaf633"]]);
export {
x as O
};