doric-framework
Version:
A column-based widget UI framework for Vue 3
690 lines (689 loc) • 26.2 kB
JavaScript
import { nextTick as pt, defineComponent as j, ref as O, unref as f, openBlock as g, createElementBlock as v, createElementVNode as n, Fragment as q, renderList as P, normalizeClass as w, toDisplayString as I, withDirectives as V, vModelText as X, vModelSelect as gt, vShow as ht, pushScopeId as Y, popScopeId as Z, createTextVNode as bt, provide as R, createBlock as A, resolveDynamicComponent as vt, watch as M, createVNode as C, withCtx as x, createCommentVNode as y, inject as K } from "vue";
import { Splitpanes as ft, Pane as _t } from "splitpanes";
import U from "vuedraggable";
import { defineStore as mt } from "pinia";
let T = {};
const J = (t) => {
T = t;
}, m = mt("doric-workspace", {
state: () => ({
columns: []
}),
actions: {
insertColumn(t) {
this.columns = [...this.columns.slice(0, t), [], ...this.columns.slice(t)];
},
removeColumn(t) {
this.columns[t].forEach((s) => {
this.removeWidget(s.id);
}), this.columns = [...this.columns.slice(0, t), ...this.columns.slice(t + 1)];
},
addWidget(t, s) {
const e = tt(t), o = z(e, this.widgetIds);
this.columns[s] = [...this.columns[s], o];
},
removeWidget(t) {
if (!this.widgets.find((e) => e.id === t))
throw new Error(`Widget with id "${t}" not found`);
this.widgets.forEach((e) => {
Object.keys(e.inputs).forEach((o) => {
e.inputs[o].subscriptions = e.inputs[o].subscriptions.filter((i) => i !== t);
});
}), this.columns = this.columns.map((e) => e.filter((o) => o.id !== t));
}
},
getters: {
workspaceShape: (t) => t.columns.map(
(s) => s.map((e) => ({
id: e.id,
type: e.type,
label: e.label
}))
),
widgetIds: (t) => t.columns.flat().map((s) => s.id),
widgets: (t) => t.columns.flat(),
getSubscribers: (t) => (s, e) => t.columns.flat().filter(
(o) => o.id !== s && e in o.inputs && (o.inputs[e].subscriptionState === "all" || o.inputs[e].subscriptionState === "some" && o.inputs[e].subscriptions.includes(s))
),
sharedParameters: (t) => {
const o = t.columns.flat().map((i) => Object.keys(i.inputs).map((c) => ({ widgetId: i.id, key: c, input: i.inputs[c] }))).flat().filter((i) => i.input.shared).map((i) => ({ widgetId: i.widgetId, key: i.key, value: i.input.value }));
return Object.fromEntries(o.map((i) => [`${i.widgetId}.${i.key}`, i.value]));
}
}
}), wt = (t) => {
if (!t)
return {};
const s = {};
return Object.keys(t).forEach((e) => {
var o, i;
s[e] = Object.assign({
value: "",
shared: !1,
subscriptions: [],
subscriptionState: (i = (o = t[e]) == null ? void 0 : o.subscriptions) != null && i.length ? "some" : "all"
}, t[e]);
}), s;
}, tt = (t) => {
if (!("type" in t) || typeof t.type != "string")
throw console.error(`Widget is missing a type or the type is not a string:
`, t), new Error("Widget is missing a type or the type is not a string");
return {
type: t.type,
id: (t == null ? void 0 : t.id) || "",
label: (t == null ? void 0 : t.label) || (t.type in T ? T[t.type] : t.type),
inputs: wt((t == null ? void 0 : t.inputs) || {})
};
}, z = (t, s) => {
if (!t.id || s.includes(t.id)) {
const e = { ...t }, o = t.type.replace("-widget", ""), i = s.filter((d) => d.startsWith(o)).map((d) => parseInt(d.replace(o + "-", ""))).filter((d) => !isNaN(d)), c = Math.max(-1, ...i) + 1;
return e.id = `${o}-${c}`, e;
} else if (t.id === t.type) {
const e = { ...t, id: `${t.type}-0` };
return z(e, s);
}
return t;
}, E = () => m().workspaceShape, yt = (t) => new Promise((s, e) => {
const o = m(), i = [];
if (!Array.isArray(t)) {
e("Workspace is not an array");
return;
}
if (!t.every((d) => Array.isArray(d))) {
e("Workspace is not an array of arrays");
return;
}
if (!t.flat().every((d) => typeof d == "object")) {
e("Widgets in new Workspace are not all objects");
return;
}
const c = t.map(
(d) => d.map((h) => {
const b = tt(h), W = z(b, i);
return i.push(W.id), W;
})
);
o.columns = [], pt(() => {
o.columns = c, s();
});
}), G = (t) => {
m().insertColumn(t);
}, kt = (t) => {
m().removeColumn(t);
}, D = (t) => {
const e = m().widgets.find((o) => o.id === t);
if (!e)
throw new Error(`Widget with id "${t}" not found`);
return e;
}, $t = (t, s) => {
m().addWidget(t, s);
}, Wt = (t) => {
m().removeWidget(t);
}, Q = (t, s, e) => {
const o = m(), i = o.widgets.find((c) => c.id === t);
if (!i)
throw new Error(`Widget with id "${t}" not found`);
o.columns = o.columns.map((c) => c.filter((d) => d.id !== t)).map((c, d) => d === s ? [...c.slice(0, e), i, ...c.slice(e)] : c);
}, St = () => m().sharedParameters, Pe = (t) => {
const s = m();
t.forEach(({ widgetId: e, key: o, value: i }) => {
const c = s.widgets.find((d) => d.id === e);
if (!c) {
console.error(`Widget with id "${e}" not found`);
return;
}
if (!("inputs" in c)) {
console.error(`Widget with id "${e}" has no inputs`);
return;
}
if (!(o in ((c == null ? void 0 : c.inputs) || {}))) {
console.error(`Widget with id "${e}" has no input "${o}"`);
return;
}
c.inputs[o].value = i;
});
}, et = /* @__PURE__ */ new Set(["string", "number", "boolean"]), Ct = (t, s) => (e) => {
const o = m();
if (e instanceof Object && "value" in e) {
const c = Object.getOwnPropertyDescriptor(e, "value") || {};
"get" in c && "set" in c && (e = e.value);
}
if (!et.has(typeof e)) {
console.error(`Widget "${t}" tried to emit a non-primitive value to "${s}". Only strings, numbers, and booleans are supported.`);
return;
}
o.getSubscribers(t, s).forEach((c) => {
if (!(s in ((c == null ? void 0 : c.inputs) || {}))) {
console.error(`Widget subscribes to "${s}" but has no listener. This may be a mistake in the workspace configuration or the widget is missing a 'useDoricInput' declaration.`);
return;
}
c.inputs[s].value = e;
});
}, xt = (t, s, e) => {
var c;
const i = m().widgets.find((d) => d.id === t);
if (!i)
throw new Error(`Widget with id "${t}" not found`);
return (c = i.inputs) != null && c[s] || (i.inputs[s] = {
value: "",
shared: (e == null ? void 0 : e.shared) || !1,
subscriptions: [],
subscriptionState: "all"
}), {
get value() {
return i.inputs[s].value;
},
set value(d) {
if (!et.has(typeof d)) {
console.error(`Widget "${t}" tried to give input "${s}" a non-primitive value. Only strings, numbers, and booleans are supported.`);
return;
}
i.inputs[s].value = d;
}
};
}, Te = () => {
const t = m(), s = JSON.parse(JSON.stringify(t.columns));
return s.forEach((e, o) => {
e.forEach((i, c) => {
if (i.inputs && Object.keys(i.inputs).length > 0) {
const d = i.inputs;
Object.keys(d).forEach((h) => {
const b = {};
d[h].value && (b.value = d[h].value), d[h].shared && (b.shared = !0), d[h].subscriptionState === "all" || d[h].subscriptionState === "none" ? b.subscriptionState = d[h].subscriptionState : (b.subscriptionState = "some", b.subscriptions = d[h].subscriptions), s[o][c].inputs[h] = b;
});
}
});
}), s;
}, k = (t) => (Y("data-v-b9e0d65b"), t = t(), Z(), t), Ot = { key: 0 }, Dt = { key: 1 }, It = { class: "font-bold text-blue-800 text-sm" }, jt = { class: "table w-full" }, Mt = { class: "table-row" }, Et = /* @__PURE__ */ k(() => /* @__PURE__ */ n("div", { class: "table-cell pb-1 pr-2" }, "Value:", -1)), Vt = { class: "table-cell pb-1" }, At = ["onUpdate:modelValue"], Bt = { class: "table-row" }, Nt = /* @__PURE__ */ k(() => /* @__PURE__ */ n("div", { class: "table-cell pb-1 pr-2" }, "Subscriptions:", -1)), Ut = { class: "table-cell pb-1" }, qt = { class: "flex flex-row" }, Pt = { class: "flex justify-center items-center" }, Tt = ["onUpdate:modelValue"], zt = /* @__PURE__ */ k(() => /* @__PURE__ */ n("option", { value: "none" }, "None", -1)), Lt = /* @__PURE__ */ k(() => /* @__PURE__ */ n("option", { value: "all" }, "All", -1)), Ft = /* @__PURE__ */ k(() => /* @__PURE__ */ n("option", { value: "some" }, "Some", -1)), Ht = [
zt,
Lt,
Ft
], Rt = { class: "flex justify-center items-center pl-1" }, Jt = ["onClick"], Gt = /* @__PURE__ */ k(() => /* @__PURE__ */ n("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
"stroke-width": "1.5",
stroke: "currentColor",
class: "w-5 h-5"
}, [
/* @__PURE__ */ n("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
d: "M7.5 3.75H6A2.25 2.25 0 003.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0120.25 6v1.5m0 9V18A2.25 2.25 0 0118 20.25h-1.5m-9 0H6A2.25 2.25 0 013.75 18v-1.5M15 12a3 3 0 11-6 0 3 3 0 016 0z"
})
], -1)), Qt = [
Gt
], Xt = { class: "table-row" }, Yt = /* @__PURE__ */ k(() => /* @__PURE__ */ n("div", { class: "table-cell pb-1 pr-2" }, "Share:", -1)), Zt = { class: "table-cell pb-1 truncate" }, Kt = { class: "flex flex-row justify-between shared-toggle" }, te = ["id", "checked", "onChange"], ee = ["for"], se = /* @__PURE__ */ k(() => /* @__PURE__ */ n("div", { class: "dot" }, null, -1)), oe = [
se
], ie = /* @__PURE__ */ j({
__name: "WidgetConfig",
props: {
widgetId: {
type: String,
required: !0
}
},
emits: [
"setSubscriptionMode"
],
setup(t, { emit: s }) {
const e = t, o = D(e.widgetId), i = (b) => {
o.inputs[b].shared = !o.inputs[b].shared;
}, c = O(""), d = (b) => {
c.value === b ? (s("setSubscriptionMode"), c.value = "") : (s("setSubscriptionMode", e.widgetId, b), c.value = b);
}, h = () => {
s("setSubscriptionMode"), c.value = "";
};
return (b, W) => Object.keys(f(o).inputs).length === 0 ? (g(), v("div", Ot, "This widget does not declare any inputs.")) : (g(), v("div", Dt, [
n("div", null, [
(g(!0), v(q, null, P(Object.keys(f(o).inputs), (_, N) => (g(), v("div", {
key: _,
class: w(["relative flex flex-col p-2", { "border-t-2": N > 0 }])
}, [
n("span", It, I(_), 1),
n("div", jt, [
n("div", Mt, [
Et,
n("div", Vt, [
V(n("input", {
type: "text",
"onUpdate:modelValue": ($) => f(o).inputs[_].value = $
}, null, 8, At), [
[X, f(o).inputs[_].value]
])
])
]),
n("div", Bt, [
Nt,
n("div", Ut, [
n("div", qt, [
n("div", Pt, [
V(n("select", {
"onUpdate:modelValue": ($) => f(o).inputs[_].subscriptionState = $,
onChange: h
}, Ht, 40, Tt), [
[gt, f(o).inputs[_].subscriptionState]
])
]),
n("div", Rt, [
V(n("button", {
class: w(["subscription-button", { active: c.value === _ }]),
onClick: ($) => d(_)
}, Qt, 10, Jt), [
[ht, f(o).inputs[_].subscriptionState === "some"]
])
])
])
])
]),
n("div", Xt, [
Yt,
n("div", Zt, [
n("div", Kt, [
n("input", {
style: { display: "none" },
type: "checkbox",
id: `${t.widgetId}.${_}`,
checked: f(o).inputs[_].shared,
onChange: ($) => i(_)
}, null, 40, te),
n("label", {
for: `${t.widgetId}.${_}`
}, oe, 8, ee)
])
])
])
])
], 2))), 128))
])
]));
}
});
const L = (t, s) => {
const e = t.__vccOpts || t;
for (const [o, i] of s)
e[o] = i;
return e;
}, ne = /* @__PURE__ */ L(ie, [["__scopeId", "data-v-b9e0d65b"]]), re = { class: "component-name" }, ce = /* @__PURE__ */ j({
__name: "MissingWidget",
props: {
type: String
},
setup(t) {
return (s, e) => (g(), v("div", null, [
bt(" Missing widget definition: "),
n("span", re, I(t.type), 1)
]));
}
});
const de = /* @__PURE__ */ L(ce, [["__scopeId", "data-v-b609b1cd"]]), ae = /* @__PURE__ */ j({
__name: "ScopedComponent",
props: {
widget: {},
widgetId: {}
},
setup(t) {
const s = t;
return R("useDoricOutput", (e) => Ct(s.widgetId, e)), R("useDoricInput", (e, o) => xt(s.widgetId, e, o)), (e, o) => (g(), A(vt(e.widget)));
}
}), B = (t) => (Y("data-v-0724aae3"), t = t(), Z(), t), le = { class: "doric-widget-framework" }, ue = { class: "relative mx-1 my-2" }, pe = ["onClick"], ge = { class: "flex-1 flex flex-row items-center" }, he = { class: "text-gray-900 text-sm font-bold mx-2 my-1" }, be = ["onUpdate:modelValue"], ve = ["onClick"], fe = /* @__PURE__ */ B(() => /* @__PURE__ */ n("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
"stroke-width": "1.5",
stroke: "currentColor",
class: "w-5 h-5"
}, [
/* @__PURE__ */ n("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
d: "M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
}),
/* @__PURE__ */ n("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
})
], -1)), _e = [
fe
], me = ["onClick"], we = /* @__PURE__ */ B(() => /* @__PURE__ */ n("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
"stroke-width": "1.5",
stroke: "currentColor",
class: "w-5 h-5"
}, [
/* @__PURE__ */ n("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
d: "M6 18L18 6M6 6l12 12"
})
], -1)), ye = [
we
], ke = {
key: 0,
class: "p-1"
}, $e = {
key: 0,
class: "widget"
}, We = {
key: 0,
class: "column-buttons"
}, Se = { class: "center" }, Ce = ["onClick"], xe = { class: "center" }, Oe = ["onClick"], De = /* @__PURE__ */ B(() => /* @__PURE__ */ n("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
"stroke-width": "1.5",
stroke: "currentColor",
class: "w-4 h-4"
}, [
/* @__PURE__ */ n("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
d: "M12 4.5v15m7.5-7.5h-15"
})
], -1)), Ie = [
De
], je = ["onClick"], Me = {
key: 1,
class: "column-insert"
}, Ee = /* @__PURE__ */ B(() => /* @__PURE__ */ n("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 20 20",
fill: "currentColor",
class: "w-4 h-4"
}, [
/* @__PURE__ */ n("path", { d: "M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" })
], -1)), Ve = [
Ee
], Ae = /* @__PURE__ */ j({
__name: "DoricFramework",
props: {
locked: {
type: Boolean,
required: !1,
default: !1
},
widgets: {
type: Object,
required: !0,
default: () => ({})
},
workspace: {
type: Object,
required: !0,
default: () => [[]]
}
},
emits: ["setSharedParameters", "onWorkspaceReady"],
setup(t, { emit: s }) {
const e = t;
J(Object.fromEntries(Object.keys(e.widgets).map((r) => [r, e.widgets[r].defaultLabel])));
const o = O(!1), i = O(""), c = O(-1), d = O({
widgetId: "",
input: ""
}), h = () => {
i.value = "", d.value = {
widgetId: "",
input: ""
}, c.value = -1;
}, b = (r) => {
if (!r)
return console.warn("newWorkspace is null"), !1;
o.value = !0, h(), yt(r).then(() => {
o.value = !1;
}).then(() => {
s("onWorkspaceReady");
});
};
M(() => e.workspace, b), b(e.workspace), M(St, (r, l) => {
s("setSharedParameters", r, l);
}), M(() => e.widgets, (r) => {
J(Object.fromEntries(Object.keys(r).map((l) => [l, r[l].defaultLabel])));
}), M(() => e.locked, (r) => {
r && h();
});
const W = (r) => {
const l = i.value;
h(), l !== r && (i.value = r);
}, _ = (r) => {
h(), Wt(r);
}, N = (r) => {
h(), c.value !== r && (c.value = r);
}, $ = (r, l) => {
$t({
id: `${r}-0`,
type: `${r}`
}, l), h();
}, st = (r, l) => {
Object.entries(l).forEach(([p, u]) => {
var a;
if ((a = u == null ? void 0 : u.element) != null && a.id && Number.isInteger(u == null ? void 0 : u.newIndex)) {
const S = u.element.id, ut = u.newIndex;
(p === "moved" || p === "added") && Q(S, r, ut);
}
});
}, ot = (r) => {
G(r);
}, it = (r) => {
kt(r);
}, F = (r, l) => {
const p = r ? 0 : E().length;
G(p), Object.entries(l).forEach(([u, a]) => {
const S = a.element.id;
u === "added" && Q(S, p, 0);
});
};
j({
name: "DoricFramework",
props: {
locked: {
type: Boolean,
required: !1,
default: !1
},
widgets: {
type: Object,
required: !0,
default: () => ({})
},
workspace: {
type: Object,
required: !0,
default: () => []
}
},
emits: ["setSharedParameters", "onWorkspaceReady"]
});
const nt = (r, l) => {
if (!r) {
d.value = {
widgetId: "",
input: ""
};
return;
}
d.value = {
widgetId: r,
input: l
};
}, rt = (r) => i.value === r ? "border-blue-600 hover:border-blue-700" : "border-gray-200 hover:border-gray-300", ct = (r) => e.locked ? "bg-gray-100" : i.value === r ? "bg-blue-100 group-hover:bg-blue-200" : "bg-gray-50 group-hover:bg-gray-100", dt = {
subscribed: "subscribed",
unsubscribed: "not-subscribed"
}, H = (r, l, p) => {
const u = D(r);
if (!u)
throw console.error(`Widget not found: ${r}`), new Error(`Widget not found: ${r}`);
return u.inputs[l].subscriptions.includes(p);
}, at = (r, l, p) => dt[H(r, l, p) ? "subscribed" : "unsubscribed"], lt = (r) => {
if (!d.value.widgetId || !d.value.input) {
console.error("Should be impossible: toggleSubscription called without subscriptionMode");
return;
}
const l = D(d.value.widgetId), p = d.value.input, u = [...l.inputs[p].subscriptions];
if (!u.includes(r))
u.push(r);
else {
const a = u.indexOf(r);
a > -1 && u.splice(a, 1);
}
l.inputs[p].subscriptions = [...u];
};
return (r, l) => (g(), v("div", le, [
C(f(U), {
class: "list-group",
list: [],
group: "widgets",
onChange: l[0] || (l[0] = (p) => F(!0, p)),
itemKey: "id"
}, {
item: x((p) => []),
_: 1
}),
C(f(ft), null, {
default: x(() => [
(g(!0), v(q, null, P(f(E)(), (p, u) => (g(), A(f(_t), {
"min-size": "20",
key: u,
size: 100 / f(E)().length
}, {
default: x(() => [
C(f(U), {
class: "list-group",
list: p,
group: "widgets",
onChange: (a) => st(u, a),
itemKey: "id",
handle: ".drag-handle"
}, {
item: x(({ element: a }) => [
n("div", ue, [
d.value.input && i.value !== a.id ? (g(), v("button", {
key: 0,
onClick: () => lt(a.id),
class: w(["subscription-helper", at(d.value.widgetId, d.value.input, a.id)])
}, [
n("div", null, I(H(d.value.widgetId, d.value.input, a.id) ? "Subscribed" : "Click to Subscribe"), 1)
], 10, pe)) : y("", !0),
n("div", {
class: w(["doric-widget-framework__widget border-2 rounded group", rt(a.id)])
}, [
n("header", {
class: w(["p-1", ct(a.id) + (t.locked ? "" : " drag-handle")])
}, [
n("div", ge, [
n("span", he, I(i.value !== a.id ? a.label : "Label:"), 1),
i.value === a.id ? V((g(), v("input", {
key: 0,
type: "text",
"onUpdate:modelValue": (S) => f(D)(a.id).label = S,
class: "w-full mr-2"
}, null, 8, be)), [
[X, f(D)(a.id).label]
]) : y("", !0)
]),
t.locked ? y("", !0) : (g(), v("div", {
key: 0,
class: w([{ invisible: i.value && i.value !== a.id }, "flex flex-row items-center"])
}, [
(a == null ? void 0 : a.type) in t.widgets && "widget" in t.widgets[a.type] ? (g(), v("button", {
key: 0,
onClick: () => W(a.id),
class: w(["config-button", i.value === a.id ? "active-config" : ""])
}, _e, 10, ve)) : y("", !0),
n("button", {
onClick: () => _(a.id),
class: w(["config-button", i.value === a.id ? "active-config" : ""])
}, ye, 10, me)
], 2))
], 2),
i.value === a.id ? (g(), v("div", ke, [
C(ne, {
widgetId: a.id,
onSetSubscriptionMode: nt
}, null, 8, ["widgetId"])
])) : y("", !0),
n("div", {
class: w([{ hidden: i.value === a.id }, "p-1"])
}, [
(a == null ? void 0 : a.type) in t.widgets && "widget" in t.widgets[a.type] ? (g(), v("div", $e, [
C(ae, {
widget: t.widgets[a.type].widget,
widgetId: a.id
}, null, 8, ["widget", "widgetId"])
])) : (g(), A(de, {
key: 1,
type: a == null ? void 0 : a.type
}, null, 8, ["type"]))
], 2)
], 2)
])
]),
_: 2
}, 1032, ["list", "onChange"]),
t.locked ? y("", !0) : (g(), v("div", We, [
n("div", Se, [
p.length === 0 ? (g(), v("button", {
key: 0,
class: "remove-column-button",
onClick: () => it(u)
}, " Remove Column ", 8, Ce)) : y("", !0)
]),
n("div", null, [
n("div", xe, [
n("button", {
class: w("add-widget-button " + (u === c.value ? "toggled" : "")),
onClick: () => N(u === c.value ? -1 : u),
title: "Add Widget"
}, Ie, 10, Oe)
]),
n("div", {
class: w(["add-widget-list", { collapsed: c.value !== u }])
}, [
(g(!0), v(q, null, P(Object.keys(t.widgets), (a) => (g(), v("button", {
key: a,
onClick: () => $(a, u)
}, I(t.widgets[a].defaultLabel), 9, je))), 128))
], 2)
])
]))
]),
_: 2
}, 1032, ["size"]))), 128))
]),
_: 1
}),
t.locked ? y("", !0) : (g(), A(f(U), {
key: 0,
class: "list-group",
list: [],
group: "widgets",
onChange: l[1] || (l[1] = (p) => F(!1, p)),
itemKey: "id"
}, {
item: x((p) => []),
_: 1
})),
t.locked ? y("", !0) : (g(), v("div", Me, [
n("button", {
onClick: l[2] || (l[2] = (p) => ot(f(E)().length))
}, Ve)
]))
]));
}
});
const ze = /* @__PURE__ */ L(Ae, [["__scopeId", "data-v-0724aae3"]]), Le = function(t, s) {
return K("useDoricInput", () => (console.error("useDoricInput is not ready. This is probably a bug in Doric."), { value: "" }))(t, s);
}, Fe = function(t) {
return K("useDoricOutput", () => (console.error("useDoricOutput is not ready. This is probably a bug in Doric."), () => {
console.error("useDoricOutput is not ready. This is probably a bug in Doric.");
}))(t);
};
export {
ze as default,
Te as exportWorkspace,
Pe as pushWorkspaceState,
Le as useDoricInput,
Fe as useDoricOutput
};
//# sourceMappingURL=doric-framework.js.map