@octavianlab/olab-ui
Version:
Octavianlab UX/UI components
131 lines (130 loc) • 4.23 kB
JavaScript
import { resolveComponent as n, openBlock as r, createBlock as m, normalizeStyle as p, createSlots as _, withCtx as l, renderSlot as a, createElementVNode as i, normalizeClass as f, toDisplayString as d, createVNode as y, createTextVNode as b, createCommentVNode as u, createElementBlock as w } from "vue";
import { _ as C } from "./obannerbrowsersupport-8a97766f.js";
const k = {
name: "ODialog",
props: {
name: { type: String, required: !0 },
label: { type: String, required: !0 },
identifier: { type: String, default: () => "id" },
showRequiredText: { type: Boolean, default: () => !0 },
icon: { type: String, default: () => "" },
breakpoints: {
type: Object,
default: () => ({ "960px": "75vw", "640px": "95%" })
},
style: {
type: Object,
default: () => ({ width: "500px" })
}
},
data() {
return {
modalIdentifier: null
};
},
watch: {
"$modal.id": {
immediate: !0,
handler(e) {
if (e)
if (this.identifier.includes(".")) {
const o = this.identifier.split(".")[0], t = this.identifier.split(".")[1];
this.modalIdentifier = this.$modal.data[o][t];
} else
this.modalIdentifier = this.$modal.data[this.identifier];
}
}
},
computed: {
hasIdentifier() {
return this.$modal.mode !== "add" && this.$modal.data[this.identifier] != null && this.modalIdentifier != null || this.$modal.mode !== "add" && this.$modal.mode === "clone" && this.$modal.data[this.identifier] != null && this.modalIdentifier != null;
}
},
methods: {
handleClose() {
this.$modal.close(), this.$emit("close");
},
getCustomLabel() {
let e = this.$translate("admin.dialog.editing.id");
return this.$modal.mode === "clone" && (e = this.$translate("admin.dialog.cloning.field")), this.$modal.mode != null && this.$modal.mode !== "clone" && (e = this.$translate(`admin.dialog.${this.$modal.mode}.field`)), e;
},
generateTitle() {
let e = `admin.dialog.title.${this.name.toLowerCase()}`;
return this.$modal.mode != null && (e += `.${this.$modal.mode}`), this.$translate(e, this.label);
}
},
unmounted() {
this.$modal.close();
}
}, v = { class: "dialog-title" }, T = { class: "footer-left-content" }, x = { class: "ml-2" }, I = {
key: 1,
class: "ml-1"
};
function O(e, o, t, S, h, s) {
const c = n("OFieldsContainer"), g = n("Tag"), $ = n("Dialog");
return r(), m($, {
id: "o-dialog",
modal: "",
dismissableMask: !1,
style: p(t.style),
visible: e.$modal.isVisible(t.name.toLowerCase()),
"onUpdate:visible": o[0] || (o[0] = (q) => s.handleClose()),
breakpoints: t.breakpoints
}, _({
header: l(() => [
a(e.$slots, "header", {}, () => [
i("div", v, [
i("i", {
class: f(["mr-3", t.icon])
}, null, 2),
i("span", null, d(s.generateTitle()), 1)
])
])
]),
default: l(() => [
y(c, {
showRequiredText: !1,
striped: !1
}, {
default: l(() => [
a(e.$slots, "default")
]),
_: 3
})
]),
_: 2
}, [
e.$slots.footer || e.$slots["footer-top"] ? {
name: "footer",
fn: l(() => [
a(e.$slots, "footer-top"),
i("div", {
class: f([
"flex align-items-center",
t.showRequiredText ? "justify-content-between" : "justify-content-end"
])
}, [
i("div", T, [
s.hasIdentifier ? (r(), m(g, {
key: 0,
class: "flex justify-content-start w-fit"
}, {
default: l(() => [
b(d(s.getCustomLabel()) + ": ", 1),
i("span", x, " #" + d(h.modalIdentifier), 1)
]),
_: 1
})) : u("", !0),
t.showRequiredText ? (r(), w("small", I, d(e.$translate("admin.dialog.text.required")), 1)) : u("", !0)
]),
a(e.$slots, "footer")
], 2)
]),
key: "0"
} : void 0
]), 1032, ["style", "visible", "breakpoints"]);
}
const j = /* @__PURE__ */ C(k, [["render", O]]);
export {
j as O
};