@kp-ui/lowcode 2.15.0-alpha.2 → 2.15.0-alpha.4

package/src/components/form-designer/toolbar-panel/index.vue2.js

@@ -1,85 +1,281 @@
-import { defineComponent as N, mergeModels as B, useModel as W, inject as b, ref as o, computed as a } from "vue";
-import { copyToClipboard as P } from "../../../utils/util.js";
-import { useI18n as R } from "../../../utils/i18n.js";
-import { saveAs as q } from "file-saver";
-import { TpfCodeEditor as k, TpfModal as z, CodeEditor as G, SvgIcon as K } from "tmgc2-share";
-import { cloneDeep as C } from "lodash-es";
-import { message as l } from "ant-design-vue";
-import Q from "./PreviewDialog.vue.js";
-const ue = /* @__PURE__ */ N({
+import { defineComponent as ie, mergeModels as re, useModel as $, inject as L, ref as p, computed as _, resolveComponent as S, createElementBlock as j, openBlock as v, createElementVNode as T, createVNode as o, withCtx as l, unref as t, normalizeStyle as P, createTextVNode as d, toDisplayString as u, createBlock as y, createCommentVNode as b, Fragment as ae, renderList as se, renderSlot as de } from "vue";
+import { copyToClipboard as ue } from "../../../utils/util.js";
+import { useI18n as pe } from "../../../utils/i18n.js";
+import { saveAs as ve } from "file-saver";
+import { SvgIcon as f, TpfCodeEditor as ce, TpfModal as fe, CodeEditor as me } from "tmgc2-share";
+import { cloneDeep as N } from "lodash-es";
+import { message as w } from "ant-design-vue";
+import ge from "./PreviewDialog.vue.js";
+const ye = { class: "toolbar-container" }, be = { class: "left-toolbar" }, he = { class: "right-toolbar" }, ke = { class: "right-toolbar-con" }, Te = /* @__PURE__ */ ie({
   __name: "index",
-  props: /* @__PURE__ */ B({
-    saveJsonApi: { type: Function, required: !1 },
-    globalDsv: { type: Object, required: !1, default: () => ({}) }
+  props: /* @__PURE__ */ re({
+    saveJsonApi: {},
+    globalDsv: { default: () => ({}) }
   }, {
-    leftWidth: { type: Number, default: 0 },
+    leftWidth: { default: 0 },
     leftWidthModifiers: {},
-    rightWidth: { type: Number, default: 0 },
+    rightWidth: { default: 0 },
     rightWidthModifiers: {}
   }),
   emits: ["update:leftWidth", "update:rightWidth"],
-  setup(u, { expose: w }) {
-    w();
-    const d = u, s = W(u, "leftWidth"), i = W(u, "rightWidth"), m = b("getDesignerConfig"), c = o(m()), g = o(!1), v = o(!1), h = o(!1), p = o(""), y = o(""), J = o(), e = b("designer", o({})), f = a(() => ({
-      widgetList: C(e.value.widgetList),
-      formConfig: C(e.value.formConfig)
-    })), T = a(() => !e.value.undoEnabled()), S = a(() => !e.value.redoEnabled()), E = a(() => e.value.getLayoutType()), { i18nt: n } = R(), x = () => {
-      d.saveJsonApi && d.saveJsonApi(f.value);
-    }, j = (t) => c.value[t] === void 0 ? !0 : !!c.value[t], I = () => {
-      e.value.undoHistoryStep();
-    }, L = () => {
-      e.value.redoHistoryStep();
-    }, M = (t) => {
-      e.value.changeLayoutType(t);
-    }, O = () => {
-      e.value.clearDesigner(), l.success("ok");
-    }, _ = () => {
-      g.value = !0;
-    }, D = (t, r) => {
-      const A = "json.json", H = new Blob([t], { type: "text/plain;charset=utf-8" });
-      q(H, A);
-    }, F = { props: d, leftWidth: s, rightWidth: i, getDesignerConfig: m, designerConfig: c, showPreviewDialogFlag: g, showImportJsonDialogFlag: v, showFormDataDialogFlag: h, exportTemplate: p, htmlCode: y, importJsonEditorRef: J, designer: e, formJson: f, undoDisabled: T, redoDisabled: S, layoutType: E, i18nt: n, saveJson: x, showToolButton: j, undoHistory: I, redoHistory: L, changeLayoutType: M, clearFormWidget: O, previewForm: _, saveAsFile: D, importJson: () => {
-      var t;
-      (t = J.value) == null || t.open(
-        JSON.stringify(e.value.getImportTemplate(), null, "  ")
+  setup(F) {
+    const W = F, h = $(F, "leftWidth"), k = $(F, "rightWidth"), A = L("getDesignerConfig"), B = p(A()), D = p(!1), I = p(!1), C = p(!1), J = p(""), M = p(""), E = p(), a = L("designer", p({})), H = _(() => ({
+      widgetList: N(a.value.widgetList),
+      formConfig: N(a.value.formConfig)
+    })), O = _(() => !a.value.undoEnabled()), R = _(() => !a.value.redoEnabled()), c = _(() => a.value.getLayoutType()), { i18nt: n } = pe(), V = () => {
+      W.saveJsonApi && W.saveJsonApi(H.value);
+    }, m = (i) => B.value[i] === void 0 ? !0 : !!B.value[i], U = () => {
+      a.value.undoHistoryStep();
+    }, z = () => {
+      a.value.redoHistoryStep();
+    }, x = (i) => {
+      a.value.changeLayoutType(i);
+    }, q = () => {
+      a.value.clearDesigner(), w.success("ok");
+    }, G = () => {
+      D.value = !0;
+    }, K = (i, e) => {
+      const r = "json.json", g = new Blob([i], { type: "text/plain;charset=utf-8" });
+      ve(g, r);
+    }, Q = () => {
+      var i;
+      (i = E.value) == null || i.open(
+        JSON.stringify(a.value.getImportTemplate(), null, "  ")
       );
-    }, doJsonImport: (t) => {
+    }, X = (i) => {
       try {
-        const r = JSON.parse(t);
-        if (!r || !r.formConfig)
+        const e = JSON.parse(i);
+        if (!e || !e.formConfig)
           throw new Error(n("designer.hint.invalidJsonFormat"));
-        e.value.loadFormJson(r), v.value = !1, l.success(n("designer.hint.importJsonSuccess")), e.value.emitHistoryChange(), e.value.emitEvent("form-json-imported", []);
-      } catch (r) {
-        l.error(r + "");
+        a.value.loadFormJson(e), I.value = !1, w.success(n("designer.hint.importJsonSuccess")), a.value.emitHistoryChange(), a.value.emitEvent("form-json-imported", []);
+      } catch (e) {
+        w.error(e + "");
       }
-    }, exportJson: () => {
-      p.value = JSON.stringify(f.value, null, "  "), h.value = !0;
-    }, copyFormDataJson: (t) => {
-      P(
-        p.value,
-        t,
-        l,
+    }, Y = () => {
+      J.value = JSON.stringify(H.value, null, "  "), C.value = !0;
+    }, Z = (i) => {
+      ue(
+        J.value,
+        i,
+        w,
         n("designer.hint.copyJsonSuccess"),
         n("designer.hint.copyJsonFail")
       );
-    }, saveFormData: () => {
-      D(y.value);
-    }, changeLeftWidth: () => {
-      s.value === 270 ? s.value = 0 : s.value = 270;
-    }, changeRightWidth: () => {
-      i.value === 300 ? i.value = 0 : i.value = 300;
-    }, get SvgIcon() {
-      return K;
-    }, get CodeEditor() {
-      return G;
-    }, get TpfModal() {
-      return z;
-    }, get TpfCodeEditor() {
-      return k;
-    }, PreviewDialog: Q };
-    return Object.defineProperty(F, "__isScriptSetup", { enumerable: !1, value: !0 }), F;
+    }, ee = () => {
+      K(M.value);
+    }, te = () => {
+      h.value === 270 ? h.value = 0 : h.value = 270;
+    }, oe = () => {
+      k.value === 300 ? k.value = 0 : k.value = 300;
+    };
+    return (i, e) => {
+      const r = S("a-button"), g = S("a-radio-button"), ne = S("a-radio-group");
+      return v(), j("div", ye, [
+        T("div", be, [
+          o(r, {
+            type: "link",
+            onClick: e[0] || (e[0] = (s) => te())
+          }, {
+            default: l(() => [
+              o(t(f), {
+                style: P(`transform:${h.value === 0 ? "rotate(180deg)" : "rotate(0deg)"}`),
+                "icon-class": "icon-a-ipadarrow_back"
+              }, null, 8, ["style"])
+            ]),
+            _: 1
+          }),
+          o(r, {
+            type: "link",
+            disabled: O.value,
+            title: t(n)("designer.toolbar.undoHint"),
+            onClick: U
+          }, {
+            default: l(() => [
+              o(t(f), { "icon-class": "icon-undo" })
+            ]),
+            _: 1
+          }, 8, ["disabled", "title"]),
+          o(r, {
+            type: "link",
+            disabled: R.value,
+            title: t(n)("designer.toolbar.redoHint"),
+            onClick: z
+          }, {
+            default: l(() => [
+              o(t(f), { "icon-class": "icon-redo" })
+            ]),
+            _: 1
+          }, 8, ["disabled", "title"]),
+          o(ne, {
+            value: c.value,
+            "onUpdate:value": e[4] || (e[4] = (s) => c.value = s)
+          }, {
+            default: l(() => [
+              o(g, {
+                value: "PC",
+                type: c.value === "PC" ? "primary" : "",
+                onClick: e[1] || (e[1] = (s) => x("PC"))
+              }, {
+                default: l(() => [
+                  d(u(t(n)("designer.toolbar.pcLayout")), 1)
+                ]),
+                _: 1
+              }, 8, ["type"]),
+              o(g, {
+                value: "Pad",
+                type: c.value === "Pad" ? "primary" : "",
+                onClick: e[2] || (e[2] = (s) => x("Pad"))
+              }, {
+                default: l(() => [
+                  d(u(t(n)("designer.toolbar.padLayout")), 1)
+                ]),
+                _: 1
+              }, 8, ["type"]),
+              o(g, {
+                type: c.value === "H5" ? "primary" : "",
+                onClick: e[3] || (e[3] = (s) => x("H5")),
+                value: "H5"
+              }, {
+                default: l(() => [
+                  d(u(t(n)("designer.toolbar.mobileLayout")), 1)
+                ]),
+                _: 1
+              }, 8, ["type"])
+            ]),
+            _: 1
+          }, 8, ["value"])
+        ]),
+        T("div", he, [
+          T("div", ke, [
+            m("clearDesignerButton") ? (v(), y(r, {
+              key: 0,
+              type: "link",
+              onClick: q
+            }, {
+              default: l(() => [
+                o(t(f), { "icon-class": "icon-el-delete" }),
+                d(u(t(n)("designer.toolbar.clear")), 1)
+              ]),
+              _: 1
+            })) : b("", !0),
+            m("previewFormButton") ? (v(), y(r, {
+              key: 1,
+              type: "link",
+              onClick: G
+            }, {
+              default: l(() => [
+                o(t(f), { "icon-class": "icon-el-view" }),
+                d(u(t(n)("designer.toolbar.preview")), 1)
+              ]),
+              _: 1
+            })) : b("", !0),
+            m("importJsonButton") ? (v(), y(r, {
+              key: 2,
+              type: "link",
+              onClick: Q
+            }, {
+              default: l(() => [
+                d(u(t(n)("designer.toolbar.importJson")), 1)
+              ]),
+              _: 1
+            })) : b("", !0),
+            m("exportJsonButton") ? (v(), y(r, {
+              key: 3,
+              type: "link",
+              onClick: Y
+            }, {
+              default: l(() => [
+                d(u(t(n)("designer.toolbar.exportJson")), 1)
+              ]),
+              _: 1
+            })) : b("", !0),
+            m("exportCodeButton") ? (v(), y(r, {
+              key: 4,
+              type: "link",
+              onClick: V
+            }, {
+              default: l(() => [
+                d(u(t(n)("designer.toolbar.save")), 1)
+              ]),
+              _: 1
+            })) : b("", !0),
+            o(r, {
+              type: "link",
+              onClick: e[5] || (e[5] = (s) => oe())
+            }, {
+              default: l(() => [
+                o(t(f), {
+                  style: P(`transform:${k.value === 0 ? "rotate(0deg)" : "rotate(180deg)"}`),
+                  "icon-class": "icon-a-ipadarrow_back"
+                }, null, 8, ["style"])
+              ]),
+              _: 1
+            }),
+            (v(!0), j(ae, null, se(i.$slots, (s, le) => de(i.$slots, le, {}, void 0, !0)), 256))
+          ])
+        ]),
+        o(ge, {
+          layoutType: c.value,
+          visible: D.value,
+          "onUpdate:visible": e[6] || (e[6] = (s) => D.value = s)
+        }, null, 8, ["layoutType", "visible"]),
+        o(t(ce), {
+          ref_key: "importJsonEditorRef",
+          ref: E,
+          isShowEventFooter: !1,
+          "event-header": t(n)("designer.hint.importJsonHint"),
+          mode: "json",
+          width: 1200,
+          height: "70vh",
+          title: t(n)("designer.toolbar.importJson"),
+          onSetCode: X
+        }, null, 8, ["event-header", "title"]),
+        o(t(fe), {
+          title: t(n)("designer.hint.exportFormData"),
+          visible: C.value,
+          "onUpdate:visible": e[8] || (e[8] = (s) => C.value = s),
+          width: "1200px"
+        }, {
+          footerRight: l(() => [
+            o(r, {
+              type: "primary",
+              class: "copy-form-data-json-btn",
+              "data-clipboard-text": J.value,
+              onClick: Z
+            }, {
+              default: l(() => [
+                d(u(t(n)("designer.hint.copyFormData")), 1)
+              ]),
+              _: 1
+            }, 8, ["data-clipboard-text"]),
+            o(r, { onClick: ee }, {
+              default: l(() => [
+                d(u(t(n)("designer.hint.saveFormData")), 1)
+              ]),
+              _: 1
+            }),
+            o(r, {
+              onClick: e[7] || (e[7] = (s) => C.value = !1)
+            }, {
+              default: l(() => [
+                d(u(t(n)("designer.hint.closePreview")), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          default: l(() => [
+            o(t(me), {
+              mode: "json",
+              readonly: !0,
+              value: J.value
+            }, null, 8, ["value"])
+          ]),
+          _: 1
+        }, 8, ["title", "visible"])
+      ]);
+    };
   }
 });
 export {
-  ue as default
+  Te as default
 };

package/src/components/form-designer/widget-panel/PanelItemDrag.vue.js

@@ -1,45 +1,49 @@
-import l from "./PanelItemDrag.vue2.js";
-import { createBlock as i, openBlock as a, withCtx as r, createElementVNode as t, createVNode as c, createTextVNode as s, toDisplayString as d } from "vue";
-import g from "../../../../_virtual/_plugin-vue_export-helper.js";
-const m = ["title", "onDblclick"];
-function p(f, _, n, e, h, k) {
-  return a(), i(e.Draggable, {
-    tag: "ul",
-    list: n.items,
-    "item-key": "key",
-    group: { name: "dragGroup", pull: "clone", put: !1 },
-    clone: e.handleContainerWidgetClone,
-    "ghost-class": "ghost",
-    sort: !1,
-    move: e.checkContainerMove
-  }, {
-    item: r(({ element: o }) => [
-      t("li", {
-        class: "container-widget-item",
-        title: o.displayName,
-        onDblclick: (v) => e.handleAddWidget(o)
-      }, [
-        t("span", null, [
-          c(e.SvgIcon, {
-            "icon-class": "icon-" + o.icon,
-            class: "color-svg-icon"
-          }, null, 8, ["icon-class"]),
-          s(
-            " " + d(e.i18n2t(
-              `designer.widgetLabel.${o.type}`,
-              `extension.widgetLabel.${o.type}`
-            )),
-            1
-            /* TEXT */
-          )
-        ])
-      ], 40, m)
-    ]),
-    _: 1
-    /* STABLE */
-  }, 8, ["list"]);
-}
-const x = /* @__PURE__ */ g(l, [["render", p], ["__file", "/Users/zhaopeng/dev/kunpeng/tmgc2-web-vfrom/src/components/form-designer/widget-panel/PanelItemDrag.vue"]]);
+import { defineComponent as c, inject as d, ref as m, createBlock as p, openBlock as g, unref as n, withCtx as u, createElementVNode as l, createVNode as f, createTextVNode as v, toDisplayString as _ } from "vue";
+import { SvgIcon as h } from "tmgc2-share";
+import { useI18n as y } from "../../../utils/i18n.js";
+import k from "../../../lib/vuedraggable/src/vuedraggable.js";
+const C = ["title", "onDblclick"], V = /* @__PURE__ */ c({
+  name: "PanelItemDrag",
+  __name: "PanelItemDrag",
+  props: {
+    items: {}
+  },
+  setup(w) {
+    const { i18n2t: i } = y(), o = d("designer", m({})), a = (e) => e.category === "container" ? o.value.copyNewContainerWidget(e) : o.value.copyNewFieldWidget(e), r = (e) => o.value.checkWidgetMove(e), s = (e) => {
+      o.value.addWidget(e);
+    };
+    return (e, N) => (g(), p(n(k), {
+      tag: "ul",
+      list: e.items,
+      "item-key": "key",
+      group: { name: "dragGroup", pull: "clone", put: !1 },
+      clone: a,
+      "ghost-class": "ghost",
+      sort: !1,
+      move: r
+    }, {
+      item: u(({ element: t }) => [
+        l("li", {
+          class: "container-widget-item",
+          title: t.displayName,
+          onDblclick: (W) => s(t)
+        }, [
+          l("span", null, [
+            f(n(h), {
+              "icon-class": "icon-" + t.icon,
+              class: "color-svg-icon"
+            }, null, 8, ["icon-class"]),
+            v(" " + _(n(i)(
+              `designer.widgetLabel.${t.type}`,
+              `extension.widgetLabel.${t.type}`
+            )), 1)
+          ])
+        ], 40, C)
+      ]),
+      _: 1
+    }, 8, ["list"]));
+  }
+});
 export {
-  x as default
+  V as default
 };

package/src/components/form-designer/widget-panel/PanelItemDrag.vue2.js

@@ -1,25 +1,4 @@
-import { defineComponent as d, inject as i, ref as c } from "vue";
-import { SvgIcon as s } from "tmgc2-share";
-import { useI18n as p } from "../../../utils/i18n.js";
-import l from "../../../lib/vuedraggable/src/vuedraggable.js";
-const h = /* @__PURE__ */ d({
-  name: "PanelItemDrag",
-  __name: "PanelItemDrag",
-  props: {
-    items: { type: Array, required: !0 }
-  },
-  setup(r, { expose: o }) {
-    o();
-    const { i18n2t: a } = p(), t = i("designer", c({})), n = { i18n2t: a, designer: t, props: r, handleContainerWidgetClone: (e) => e.category === "container" ? t.value.copyNewContainerWidget(e) : t.value.copyNewFieldWidget(e), checkContainerMove: (e) => t.value.checkWidgetMove(e), handleAddWidget: (e) => {
-      t.value.addWidget(e);
-    }, get SvgIcon() {
-      return s;
-    }, get Draggable() {
-      return l;
-    } };
-    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
-  }
-});
+import f from "./PanelItemDrag.vue.js";
 export {
-  h as default
+  f as default
 };

package/src/components/form-designer/widget-panel/index.vue.js

@@ -1,70 +1,7 @@
-import _ from "./index.vue2.js";
-import { resolveComponent as c, createElementBlock as l, openBlock as s, createElementVNode as r, createVNode as a, withCtx as n, Fragment as f, renderList as v, createBlock as g, createTextVNode as b, toDisplayString as y } from "vue";
+import o from "./index.vue2.js";
 /* empty css           */
-import u from "../../../../_virtual/_plugin-vue_export-helper.js";
-const k = { class: "side-scroll-bar" }, x = { class: "panel-container" };
-function K(N, o, w, e, I, h) {
-  const i = c("a-collapse-panel"), d = c("a-collapse"), p = c("a-tab-pane"), m = c("a-tabs");
-  return s(), l("div", k, [
-    r("div", x, [
-      a(m, {
-        activeKey: e.firstTab,
-        "onUpdate:activeKey": o[1] || (o[1] = (t) => e.firstTab = t),
-        class: "no-bottom-margin indent-left-margin"
-      }, {
-        default: n(() => [
-          a(p, { key: "componentLib" }, {
-            tab: n(() => [
-              r("span", null, [
-                a(e.SvgIcon, { "icon-class": "icon-el-set-up" }),
-                b(
-                  " " + y(e.i18nt("designer.componentLib")),
-                  1
-                  /* TEXT */
-                )
-              ])
-            ]),
-            default: n(() => [
-              a(d, {
-                activeKey: e.activeNames,
-                "onUpdate:activeKey": o[0] || (o[0] = (t) => e.activeNames = t),
-                class: "widget-collapse"
-              }, {
-                default: n(() => [
-                  (s(!0), l(
-                    f,
-                    null,
-                    v(e.panelItems, (t) => (s(), g(i, {
-                      key: t.key,
-                      header: t.title
-                    }, {
-                      default: n(() => [
-                        a(e.PanelItemDrag, {
-                          items: t.items
-                        }, null, 8, ["items"])
-                      ]),
-                      _: 2
-                      /* DYNAMIC */
-                    }, 1032, ["header"]))),
-                    128
-                    /* KEYED_FRAGMENT */
-                  ))
-                ]),
-                _: 1
-                /* STABLE */
-              }, 8, ["activeKey"])
-            ]),
-            _: 1
-            /* STABLE */
-          })
-        ]),
-        _: 1
-        /* STABLE */
-      }, 8, ["activeKey"])
-    ])
-  ]);
-}
-const V = /* @__PURE__ */ u(_, [["render", K], ["__scopeId", "data-v-083a4d72"], ["__file", "/Users/zhaopeng/dev/kunpeng/tmgc2-web-vfrom/src/components/form-designer/widget-panel/index.vue"]]);
+import t from "../../../../_virtual/_plugin-vue_export-helper.js";
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-29dd250d"]]);
 export {
-  V as default
+  e as default
 };

package/src/components/form-designer/widget-panel/index.vue2.js

@@ -1,35 +1,78 @@
-import { defineComponent as l, ref as i, computed as c } from "vue";
-import { SvgIcon as d } from "tmgc2-share";
-import m from "./PanelItemDrag.vue.js";
-import { containers as p, basicFields as f, advancedFields as _ } from "./widgetsConfig.js";
-import { useI18n as u } from "../../../utils/i18n.js";
-const y = /* @__PURE__ */ l({
+import { defineComponent as g, ref as d, computed as T, resolveComponent as o, createElementBlock as m, openBlock as l, createElementVNode as p, createVNode as t, withCtx as n, Fragment as k, renderList as F, createBlock as K, createTextVNode as x, unref as _, toDisplayString as L } from "vue";
+import { SvgIcon as N } from "tmgc2-share";
+import B from "./PanelItemDrag.vue.js";
+import { containers as C, basicFields as I, advancedFields as V } from "./widgetsConfig.js";
+import { useI18n as h } from "../../../utils/i18n.js";
+const w = { class: "side-scroll-bar" }, E = { class: "panel-container" }, j = /* @__PURE__ */ g({
   name: "WidgetPanel",
   __name: "index",
-  setup(T, { expose: n }) {
-    n();
-    const { i18nt: e } = u(), r = i(["containerTitle", "basicFieldTitle", "advancedFieldTitle"]), a = i("componentLib"), o = c(() => [
+  setup(S) {
+    const { i18nt: a } = h(), s = d(["containerTitle", "basicFieldTitle", "advancedFieldTitle"]), c = d("componentLib"), u = T(() => [
       {
-        title: e("designer.containerTitle"),
+        title: a("designer.containerTitle"),
         key: "containerTitle",
-        items: p.filter((s) => !s.internal)
+        items: C.filter((r) => !r.internal)
       },
       {
-        title: e("designer.basicFieldTitle"),
+        title: a("designer.basicFieldTitle"),
         key: "basicFieldTitle",
-        items: f
+        items: I
       },
       {
-        title: e("designer.advancedFieldTitle"),
+        title: a("designer.advancedFieldTitle"),
         key: "advancedFieldTitle",
-        items: _
+        items: V
       }
-    ]), t = { i18nt: e, activeNames: r, firstTab: a, panelItems: o, get SvgIcon() {
-      return d;
-    }, PanelItemDrag: m };
-    return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
+    ]);
+    return (r, i) => {
+      const v = o("a-collapse-panel"), f = o("a-collapse"), b = o("a-tab-pane"), y = o("a-tabs");
+      return l(), m("div", w, [
+        p("div", E, [
+          t(y, {
+            activeKey: c.value,
+            "onUpdate:activeKey": i[1] || (i[1] = (e) => c.value = e),
+            class: "no-bottom-margin indent-left-margin"
+          }, {
+            default: n(() => [
+              t(b, { key: "componentLib" }, {
+                tab: n(() => [
+                  p("span", null, [
+                    t(_(N), { "icon-class": "icon-el-set-up" }),
+                    x(" " + L(_(a)("designer.componentLib")), 1)
+                  ])
+                ]),
+                default: n(() => [
+                  t(f, {
+                    activeKey: s.value,
+                    "onUpdate:activeKey": i[0] || (i[0] = (e) => s.value = e),
+                    class: "widget-collapse"
+                  }, {
+                    default: n(() => [
+                      (l(!0), m(k, null, F(u.value, (e) => (l(), K(v, {
+                        key: e.key,
+                        header: e.title
+                      }, {
+                        default: n(() => [
+                          t(B, {
+                            items: e.items
+                          }, null, 8, ["items"])
+                        ]),
+                        _: 2
+                      }, 1032, ["header"]))), 128))
+                    ]),
+                    _: 1
+                  }, 8, ["activeKey"])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["activeKey"])
+        ])
+      ]);
+    };
   }
 });
 export {
-  y as default
+  j as default
 };