@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
106 lines (105 loc) • 3.11 kB
JavaScript
import { defineComponent as m, ref as o, watch as v, createVNode as r } from "vue";
const T = {
id: { type: String, default: "" },
dragula: { type: Object },
toolboxItems: { type: Array, default: [] }
}, b = /* @__PURE__ */ m({
name: "FDesignerToolbox",
props: T,
emits: [],
setup(t) {
const s = o(t.toolboxItems), l = o(t.dragula);
function i(e, a) {
a.isHide = !a.isHide;
}
function c(e) {
return {
"f-icon": !0,
"f-icon-arrow-60-down": !e.isHide,
"f-icon-arrow-e": e.isHide
};
}
function d(e) {
return r("div", {
class: "card-header",
onClick: (a) => i(a, e)
}, [r("div", {
class: "panel-item-title"
}, [r("div", {
class: "f-section-formgroup-legend"
}, [r("div", {
class: "f-header px-2 col-form-label"
}, [r("div", {
class: "f-toolbar mr-2"
}, [r("span", {
class: c(e)
}, null)]), r("div", {
class: "f-title f-utils-fill d-flex justify-content-between"
}, [r("span", null, [e.name])])])])])]);
}
function u(e) {
return {
"d-none": e.dependentParent || e.hideInControlBox,
controlPanel: !0,
"drag-copy": !0,
"no-drag": e.disable,
updating: e.updating
};
}
function f(e) {
const a = {
farrisControlIcon: !0,
"fd-i-Family": !0
}, n = `fd_pc-${e.icon || e.type}`;
return a[n] = !0, a;
}
function p(e, a) {
return r("div", {
class: u(e),
"data-sourceType": "control",
"data-controlType": e.type,
"data-controlTypeName": e.name,
"data-category": e.category,
"data-feature": e.feature ? JSON.stringify(e.feature) : "",
"data-fieldType": e.fieldType,
"data-templateId": e.id,
"data-templateCategory": e.templateCategory,
hidden: a.isHide
}, [r("div", null, [r("div", {
class: f(e)
}, null), r("div", {
class: "controlName"
}, [e.name])])]);
}
function C(e) {
return r("div", {
class: "card-body px-2 py-0 border-0 controlCategory no-drop"
}, [e.items.map((a) => p(a, e))]);
}
function y(e) {
return !e.hideInControlBox && r("div", {
class: "farris-panel-item card border-0"
}, [d(e), C(e)]);
}
function g(e) {
if (!e)
return;
const a = document.getElementsByClassName("controlCategory");
a && (e.containers = e.containers.filter((n) => !n.className.includes("controlCategory")), Array.from(a).forEach((n) => {
e.containers.push(n);
}));
}
return v(() => t.dragula, (e) => {
var a, n;
l.value = e, (a = l.value) != null && a.getDragulaInstance && g((n = l.value) == null ? void 0 : n.getDragulaInstance());
}), () => r("div", {
class: "controlBox f-utils-fill-flex-column"
}, [r("div", {
class: "farris-panel f-utils-fill-flex-column",
style: "overflow:auto;"
}, [s.value.map((e) => y(e))])]);
}
});
export {
b as FDesignerToolbox
};