@octavianlab/olab-ui
Version:
Octavianlab UX/UI components
223 lines (222 loc) • 8.04 kB
JavaScript
import { u as y, _ as v } from "./odialogexport-b6e3ec97.js";
import { S as D, A } from "./vendor-55459b0e.js";
import { nextTick as S, resolveComponent as g, resolveDirective as _, openBlock as n, createElementBlock as r, createBlock as c, createCommentVNode as d, withDirectives as h, createElementVNode as m, normalizeClass as o, Fragment as w, renderList as k, normalizeStyle as B, renderSlot as E, vShow as P } from "vue";
import { _ as C } from "./obannerbrowsersupport-8a97766f.js";
const N = {
name: "ODraggable",
props: {
elementsNumber: { type: Number, required: !0, default: () => 0 },
isDragAlwaysActive: { type: Boolean, default: () => !1 },
isGridActive: { type: Boolean, default: () => !1 },
colClassMap: { type: Object, default: () => {
} },
saveMode: { type: String, default: () => "store" },
isTooltipActive: { type: Boolean, default: () => !0 },
isLabelActive: { type: Boolean, default: () => !1 },
isEditMode: { type: Boolean, default: () => !1 }
},
data() {
return {
API: null,
useSettingsStore: y(),
elements: this.createElements(),
draggable: null,
isFirstTime: !1,
pageSettingId: null,
isDragActive: !1,
isDragEnabled: !1,
isLoading: !0,
// No Lazy render ($loading...)
skeletonRect: {
width: "75vw",
height: "75vh"
}
};
},
computed: {
isDragAlwaysActiveComp() {
return this.isDesktop ? this.isDragAlwaysActive : !1;
}
},
watch: {
elementsNumber(e) {
e && (this.elements = this.createElements(), this.isLoading = !1);
}
},
methods: {
createElements() {
const e = [];
for (let t = 0; t < this.elementsNumber; t++)
e.push(t);
return e;
},
createDraggable() {
const e = document.getElementById("o-draggable-container");
this.draggable = D.create(e, {
draggable: ".o-draggable-container__item",
animation: 150,
easing: "cubic-bezier(1, 0, 0, 1)",
ghostClass: "sortable-ghost",
onStart: () => {
this.dragActiveToggle();
},
onEnd: (t) => {
this.dragActiveToggle(), this.onDrop(t);
},
plugins: [A]
}), this.isDragAlwaysActiveComp || (this.draggable.options.disabled = !0);
},
dragActiveToggle() {
this.isDragActive = !this.isDragActive;
},
dragEnabledToggle() {
this.isDragAlwaysActiveComp || (this.isDragEnabled = !this.isDragEnabled, this.$emit("update:isEditMode", this.isDragEnabled), this.isDragEnabled ? (this.$refs.oDraggableBtn.$el.style.backgroundColor = "#607D8B", this.$refs.oDraggableBtn.$el.style.color = "var(--surface-a)") : (this.$refs.oDraggableBtn.$el.style.backgroundColor = "transparent", this.$refs.oDraggableBtn.$el.style.border = "1px solid #607D8B", this.$refs.oDraggableBtn.$el.style.color = "#607D8B"), this.draggable.options.disabled = !this.draggable.options.disabled);
},
onDrop({ oldIndex: e, newIndex: t }) {
if (e === t)
return;
const a = this.elements[e];
switch (this.elements.splice(e, 1), this.elements.splice(t, 0, a), this.saveMode) {
case "store":
this.useSettingsStore.updateDraggableTemplates({
page: this.currentPageName,
value: this.elements
}), this.elements = this.useSettingsStore.getDraggableTemplates(this.currentPageName);
break;
case "pageSettings":
this.isFirstTime ? this.doAddPageSettings() : this.doEditPageSettings();
break;
case "custom":
this.$emit("dropElement", { oldIdx: e, newIdx: t });
break;
}
},
async doSearchPageSettings() {
try {
const { data: e } = await this.API.pagesetting.search({ key: this.currentPageName });
if (e.data.length) {
this.pageSettingId = e.data[0].id;
const t = JSON.parse(e.data[0].value);
this.elements.length === t.length && (this.elements = t);
} else
this.isFirstTime = !0;
} catch (e) {
console.log(e);
}
},
async doAddPageSettings() {
const e = {
key: this.currentPageName,
name: `${this.currentPageName}-layout`,
value: JSON.stringify(this.elements),
type: 2,
mode: 1
};
try {
await this.API.pagesetting.add(e), this.isFirstTime = !1, await this.doSearchPageSettings();
} catch (t) {
console.log(t);
}
},
async doEditPageSettings() {
const e = {
name: this.currentPageName,
value: JSON.stringify(this.elements),
type: 2,
mode: 1
};
try {
await this.API.pagesetting.edit(this.pageSettingId, e), await this.doSearchPageSettings();
} catch (t) {
console.log(t);
}
},
animationDelay(e) {
return this.isDragAlwaysActiveComp ? "" : `animation-delay: ${e * 0.1}s`;
}
},
async created() {
if (this.isDragEnabled = this.isDragAlwaysActiveComp, this.saveMode === "store") {
this.isLoading = !1;
const e = this.useSettingsStore.getDraggableTemplates(this.currentPageName);
e.length && this.elements.length === e.length && (this.elements = e);
return;
}
if (this.saveMode === "pageSettings") {
const e = localStorage.getItem("site"), t = await v(/* @__PURE__ */ Object.assign({ "../api/agp/index.js": () => import("./index-6d089767.js"), "../api/keycloak/index.js": () => import("./index-212e5074.js"), "../api/pam/index.js": () => import("./index-ddad3afb.js") }), `../api/${e}/index.js`);
this.API = t.default, await this.doSearchPageSettings(), this.isLoading = !1;
}
},
mounted() {
S(() => {
const e = document.querySelector(".layout-content");
if (e) {
const a = e.getBoundingClientRect().width + "px";
this.skeletonRect.width = `calc(${a} - 4rem)`;
}
this.createDraggable(), this.$refs.oDraggableBtn != null && (this.$refs.oDraggableBtn.$el.style.opacity = "1");
});
}
}, T = {
id: "o-draggable",
class: "relative"
};
function M(e, t, a, L, s, i) {
const u = g("Skeleton"), b = g("Button"), p = _("tooltip");
return n(), r("div", T, [
a.saveMode === "pageSettings" && s.isLoading ? (n(), c(u, {
key: 0,
id: "o-draggable-skeleton",
class: "absolute",
width: s.skeletonRect.width,
height: s.skeletonRect.height
}, null, 8, ["width", "height"])) : d("", !0),
i.isDragAlwaysActiveComp ? d("", !0) : h((n(), c(b, {
key: 1,
icon: "fas fa-up-down-left-right",
onClick: t[0] || (t[0] = (l) => i.dragEnabledToggle()),
id: "o-draggable__btn",
ref: "oDraggableBtn",
class: "o-draggable__btn o-draggable__btn-custom absolute",
label: a.isLabelActive ? e.$translate("admin.draggable.function.label") : void 0
}, null, 8, ["label"])), [
[
p,
a.isTooltipActive ? e.$translate("admin.draggable.function.info") : void 0,
void 0,
{ left: !0 }
]
]),
h(m("div", {
id: "o-draggable-container",
class: o(["lg:px-3 lg:pt-3", { grid: a.isGridActive }])
}, [
(n(!0), r(w, null, k(s.elements, (l, f) => (n(), r("div", {
key: l,
class: o([
"o-draggable-container__item",
a.isGridActive && a.colClassMap[l] ? a.colClassMap[l] : "",
{ "pointer-grab": !i.isDragAlwaysActiveComp && s.isDragEnabled }
])
}, [
m("div", {
class: o([
{
"shake-animation": !i.isDragAlwaysActiveComp && s.isDragEnabled && !s.isDragActive
},
{ "pointer-events-none": s.isDragActive || s.isDragEnabled }
]),
style: B(i.animationDelay(f))
}, [
E(e.$slots, `draggable-${l}`)
], 6)
], 2))), 128))
], 2), [
[P, !s.isLoading]
])
]);
}
const R = /* @__PURE__ */ C(N, [["render", M]]);
export {
R as O
};