@javaguns/flow-ui
Version:
``` <template> <a-spin :spinning="loading"> <FlowDesigner ref="flowDesigner" top="50px"> </FlowDesigner> </a-spin> </template> <script lang="ts" setup> import { ref, provide, onMounted } from 'vue'; import { FlowDesigner, LoadingKey } from '@j
69 lines (68 loc) • 2.11 kB
JavaScript
import { defineComponent as u, watch as w, computed as h, onMounted as C, openBlock as m, createElementBlock as N, normalizeStyle as x, createVNode as l, unref as n, withCtx as r, createBlock as _, resolveDynamicComponent as v } from "vue";
import { pluginManager as d } from "@javaguns/utils";
import V from "../../hooks/useIcon.mjs";
const b = u({ name: "flow-drawer-header" }), B = /* @__PURE__ */ u({
...b,
props: {
node: { default: {
color1: "rgb(250, 146, 0)",
color2: "rgb(250, 146, 0)",
color3: "rgb(255, 188, 88)",
title: "",
nodeName: ""
} },
title: {}
},
setup(c) {
const i = d.getComponent("Row"), p = d.getComponent("Col"), s = d.getComponent("Input"), e = c, { loadIcon: f } = V();
w(
() => e.title,
(o, t) => {
e.node.nodeName = o;
}
);
const g = h(() => (o) => ({
height: "60px",
width: "100%",
"line-height": "60px",
padding: "0px 10px",
background: `linear-gradient(271deg, ${o.color1} 9%, ${o.color2} 35%, ${o.color3} 100%)`
}));
return C(() => {
e.title && (e.node.nodeName = e.title);
}), (o, t) => (m(), N("header", {
class: "flow-drawer-header",
style: x(g.value(e.node))
}, [
l(n(i), { gutter: 20 }, {
default: r(() => [
l(n(p), { span: 1 }, {
default: r(() => [
(m(), _(v(n(f)(e.node)), {
size: "20",
color: "#fff"
}))
]),
_: 1
}),
l(n(p), { span: 21 }, {
default: r(() => [
l(n(s), {
modelValue: e.node.nodeName,
"onUpdate:modelValue": t[0] || (t[0] = (a) => e.node.nodeName = a),
value: e.node.nodeName,
"onUpdate:value": t[1] || (t[1] = (a) => e.node.nodeName = a),
class: "flow-drawer-header-title"
}, null, 8, ["modelValue", "value"])
]),
_: 1
})
]),
_: 1
})
], 4));
}
});
export {
B as default
};