@opentiny/tiny-engine-toolbar-save 2.0.0-alpha.2 → 2.0.0-alpha.4

package/dist/index.js

@@ -1,90 +1,118 @@
 import "./style.css";
-import { reactive as V, ref as T, onUnmounted as A, resolveComponent as p, openBlock as C, createElementBlock as w, Fragment as E, createElementVNode as v, createVNode as i, withCtx as l, toDisplayString as N, withModifiers as M, createTextVNode as b, createBlock as U, createCommentVNode as D } from "vue";
-import { VueMonaco as L } from "@opentiny/tiny-engine-common";
-import { Button as O, Popover as G, DialogBox as R, Checkbox as h, Select as J } from "@opentiny/vue";
-import { usePage as j, useCanvas as y, useLayout as F, useNotify as q, getMetaApi as z, META_APP as H, useBlock as K } from "@opentiny/tiny-engine-meta-register";
-import { constants as Q } from "@opentiny/tiny-engine-utils";
-import { handlePageUpdate as W } from "@opentiny/tiny-engine-common/js/http";
-const { PAGE_STATUS: u } = Q, g = V({
+import { reactive as B, ref as P, onUnmounted as N, resolveComponent as u, openBlock as x, createElementBlock as O, createVNode as d, withCtx as r, createElementVNode as b, withModifiers as M, createTextVNode as k, createBlock as U, createCommentVNode as h } from "vue";
+import { VueMonaco as D, ToolbarBase as L } from "@opentiny/tiny-engine-common";
+import { Button as G, Popover as R, DialogBox as j, Checkbox as J, Select as q } from "@opentiny/vue";
+import { usePage as z, useCanvas as V, getOptions as F, useNotify as T, useLayout as H, getMetaApi as K, META_APP as Q, useBlock as W } from "@opentiny/tiny-engine-meta-register";
+import { constants as X } from "@opentiny/tiny-engine-utils";
+import { handlePageUpdate as Y } from "@opentiny/tiny-engine-common/js/http";
+const A = {
+  id: "engine.toolbars.save",
+  type: "toolbars",
+  title: "save",
+  options: {
+    icon: {
+      default: "save"
+    },
+    renderType: "button"
+  }
+}, { PAGE_STATUS: p } = X, _ = B({
   visible: !1,
   code: "",
   originalCode: "",
   disabled: !1
-}), _ = T(!1), X = async (a) => {
-  var n;
-  const e = z(H.BlockManage), { getCurrentBlock: o } = K(), t = o();
-  t.label = a.fileName, t.content = a, _.value = !0, t.screenshot = await e.getBlockBase64(), await ((n = e.saveBlock) == null ? void 0 : n.call(e, t)), _.value = !1;
-}, Y = async (a) => {
-  const { currentPage: e } = y().pageState, o = {
-    page_content: a
+}), y = P(!1), Z = async (n) => {
+  var a;
+  const e = K(Q.BlockManage), { getCurrentBlock: t } = W(), o = t();
+  o.label = n.fileName, o.content = n, y.value = !0, o.screenshot = await e.getBlockBase64(), await ((a = e.saveBlock) == null ? void 0 : a.call(e, o)), y.value = !1;
+}, I = async (n) => {
+  const { currentPage: e } = V().pageState, t = {
+    page_content: n
   };
-  _.value = !0, await W(e.id, { ...e, ...o }), _.value = !1;
-}, k = (a) => {
-  const { pageSettingState: e, isTemporaryPage: o } = j(), { isBlock: t, canvasApi: n, pageState: f } = y(), s = JSON.parse(a), { setSchema: r, selectNode: d } = n.value;
-  if (f.pageSchema = s, r(s), e != null && e.isAIPage) {
-    o.saved && (o.saved = !1), o.saved = !0;
+  y.value = !0, await Y(e.id, { ...e, ...t }), y.value = !1;
+}, S = (n) => {
+  const { pageSettingState: e, isTemporaryPage: t } = z(), { isBlock: o, canvasApi: a, pageState: s } = V(), i = JSON.parse(n), { setSchema: l, selectNode: m } = a.value;
+  if (s.pageSchema = i, l(i), e != null && e.isAIPage) {
+    t.saved && (t.saved = !1), t.saved = !0;
     const c = "page_content";
-    return e.currentPageData[c] = s, Promise.resolve();
+    return e.currentPageData[c] = i, Promise.resolve();
   }
-  return d(null), t() ? X(s) : Y(s);
-}, x = async () => {
-  var d;
-  const { isSaved: a, canvasApi: e } = y();
-  if (a() || g.disabled)
+  return m(null), o() ? Z(i) : I(i);
+}, w = async () => {
+  var C;
+  const { isSaved: n, canvasApi: e } = V();
+  if (n() || _.disabled)
     return;
-  const o = (d = F().layoutState) == null ? void 0 : d.pageStatus, t = o == null ? void 0 : o.state, n = o == null ? void 0 : o.data, { getSchema: f } = e.value, s = {
-    [u.Release]: "当前页面未锁定，请先锁定再保存",
-    [u.Empty]: "当前应用无页面，请先新建页面再保存",
-    [u.Guest]: "官网演示应用不能保存页面，如需体验请切换应用",
-    [u.Lock]: `当前页面被 ${n == null ? void 0 : n.username} ${n == null ? void 0 : n.resetPasswordToken} 锁定，如需编辑请先联系他解锁文件，然后再锁定该页面后编辑！`
+  const { beforeSave: t, saveMethod: o, saved: a } = F(A.id);
+  try {
+    if (typeof t == "function" && await t(), typeof o == "function" && await o())
+      return;
+  } catch (f) {
+    T({
+      type: "error",
+      message: `Error in saving: ${f}`
+    });
+  }
+  const s = (C = H().layoutState) == null ? void 0 : C.pageStatus, i = s == null ? void 0 : s.state, l = s == null ? void 0 : s.data, { getSchema: m } = e.value, c = {
+    [p.Release]: "当前页面未锁定，请先锁定再保存",
+    [p.Empty]: "当前应用无页面，请先新建页面再保存",
+    [p.Guest]: "官网演示应用不能保存页面，如需体验请切换应用",
+    [p.Lock]: `当前页面被 ${l == null ? void 0 : l.username} ${l == null ? void 0 : l.resetPasswordToken} 锁定，如需编辑请先联系他解锁文件，然后再锁定该页面后编辑！`
   };
-  if ([u.Release, u.Empty, u.Guest, u.Lock].includes(t)) {
-    q({
+  if ([p.Release, p.Empty, p.Guest, p.Lock].includes(i)) {
+    T({
       type: "error",
       title: "保存失败",
-      message: s[t]
+      message: c[i]
     });
     return;
   }
-  g.disabled = !0;
-  const r = f();
-  g.code = JSON.stringify(r || {}, null, 2), k(g.code).finally(() => {
-    g.disabled = !1;
+  _.disabled = !0;
+  const g = m();
+  _.code = JSON.stringify(g || {}, null, 2), S(_.code).finally(() => {
+    if (_.disabled = !1, typeof a == "function")
+      try {
+        a();
+      } catch (f) {
+        T({
+          type: "error",
+          message: `Error in saved: ${f}`
+        });
+      }
   });
-};
-const Z = (a, e) => {
-  const o = a.__vccOpts || a;
-  for (const [t, n] of e)
-    o[t] = n;
-  return o;
-}, I = {
-  saveCommon: k,
-  openCommon: x
-}, $ = {
+}, $ = (n, e) => {
+  const t = n.__vccOpts || n;
+  for (const [o, a] of e)
+    t[o] = a;
+  return t;
+}, ee = {
+  saveCommon: S,
+  openCommon: w
+}, oe = {
   components: {
-    VueMonaco: L,
-    TinyButton: O,
-    TinyPopover: G,
-    TinyDialogBox: R,
-    TinyCheckbox: h,
-    TinySelect: J
+    VueMonaco: D,
+    TinyButton: G,
+    TinyPopover: R,
+    TinyDialogBox: j,
+    TinyCheckbox: J,
+    TinySelect: q,
+    ToolbarBase: L
   },
   props: {
-    icon: {
-      type: String,
-      default: "save"
-    },
     iconExpand: {
       type: String,
       default: "down-arrow"
+    },
+    options: {
+      type: Object,
+      default: () => ({})
     }
   },
   setup() {
-    const a = [
+    const { isSaved: n } = V(), e = [
       { value: 5, label: "5分钟" },
       { value: 10, label: "10分钟" },
       { value: 15, label: "15分钟" }
-    ], e = V({
+    ], t = B({
       visible: !1,
       code: "",
       originalCode: "",
@@ -93,167 +121,162 @@ const Z = (a, e) => {
       saveVisible: !1,
       checked: !1,
       preservationTime: null
-    }), o = T(null), t = () => {
-      e.visible = !1, e.originalCode = "";
-    }, n = () => {
-      _.value || x();
-    }, f = () => {
-      k();
-    }, s = {
+    }), o = P(null), a = () => {
+      t.visible = !1, t.originalCode = "";
+    }, s = () => {
+      y.value || w();
+    }, i = () => {
+      S();
+    }, l = {
       language: "json",
       lineNumbers: !0,
       minimap: {
         enabled: !1
       }
-    }, r = () => {
-      clearTimeout(e.preservationTime), e.preservationTime = setTimeout(() => {
-        n(), r();
-      }, e.timeValue * 60 * 1e3);
-    }, d = () => {
-      e.checked ? r() : clearTimeout(e.preservationTime), e.saveVisible = !1;
+    }, m = () => {
+      clearTimeout(t.preservationTime), t.preservationTime = setTimeout(() => {
+        s(), m();
+      }, t.timeValue * 60 * 1e3);
     }, c = () => {
-      e.saveVisible = !1;
+      t.checked ? m() : clearTimeout(t.preservationTime), t.saveVisible = !1;
+    }, g = () => {
+      t.saveVisible = !1;
     };
-    return A(() => {
-      clearTimeout(e.preservationTime);
+    return N(() => {
+      clearTimeout(t.preservationTime);
     }), {
-      state: e,
+      state: t,
       editor: o,
-      editorOptions: s,
-      isLoading: _,
-      close: t,
-      openApi: n,
-      saveApi: f,
-      options: a,
-      cancel: c,
-      autoSave: d
+      editorOptions: l,
+      isLoading: y,
+      isSaved: n,
+      close: a,
+      openApi: s,
+      saveApi: i,
+      delayOptions: e,
+      cancel: g,
+      autoSave: c
     };
   }
-}, ee = { class: "toolbar-save" }, te = { class: "save-title" }, oe = { class: "save-style" }, ne = { class: "save-time" }, ae = { class: "save-button-group" };
-function se(a, e, o, t, n, f) {
-  const s = p("svg-icon"), r = p("tiny-checkbox"), d = p("tiny-select"), c = p("tiny-button"), S = p("tiny-popover"), B = p("vue-monaco"), P = p("tiny-dialog-box");
-  return C(), w(E, null, [
-    v("div", ee, [
-      i(c, {
-        class: "save-button",
-        onClick: t.openApi
-      }, {
-        default: l(() => [
-          i(s, { name: o.icon }, null, 8, ["name"]),
-          v("span", te, N(t.isLoading ? "保存中" : "保存"), 1),
-          v("span", {
-            onClick: e[3] || (e[3] = M((m) => t.state.saveVisible = !t.state.saveVisible, ["stop"]))
-          }, [
-            i(S, {
-              modelValue: t.state.saveVisible,
-              "onUpdate:modelValue": e[2] || (e[2] = (m) => t.state.saveVisible = m),
-              "visible-arrow": !1,
-              width: "203",
-              trigger: "manual"
-            }, {
-              reference: l(() => [
-                i(s, { name: o.iconExpand }, null, 8, ["name"])
-              ]),
-              default: l(() => [
-                v("div", oe, [
-                  e[9] || (e[9] = v("div", { class: "save-setting" }, "保存设置", -1)),
-                  i(r, {
-                    modelValue: t.state.checked,
-                    "onUpdate:modelValue": e[0] || (e[0] = (m) => t.state.checked = m),
-                    name: "tiny-checkbox"
+}, te = { class: "toolbar-save" }, ne = { class: "save-style" }, ae = { class: "save-time" }, se = { class: "save-button-group" };
+function ie(n, e, t, o, a, s) {
+  const i = u("svg-icon"), l = u("tiny-checkbox"), m = u("tiny-select"), c = u("tiny-button"), g = u("tiny-popover"), C = u("vue-monaco"), f = u("tiny-dialog-box"), E = u("toolbar-base");
+  return x(), O("div", te, [
+    d(E, {
+      content: o.isLoading ? "保存中" : "保存",
+      icon: t.options.icon.default || t.options.icon,
+      options: { ...t.options, showDots: !o.isSaved() },
+      onClickApi: o.openApi
+    }, {
+      button: r(() => [
+        b("span", {
+          onClick: e[3] || (e[3] = M((v) => o.state.saveVisible = !o.state.saveVisible, ["stop"]))
+        }, [
+          d(g, {
+            modelValue: o.state.saveVisible,
+            "onUpdate:modelValue": e[2] || (e[2] = (v) => o.state.saveVisible = v),
+            "visible-arrow": !1,
+            width: "203",
+            trigger: "manual"
+          }, {
+            reference: r(() => [
+              d(i, { name: t.iconExpand }, null, 8, ["name"])
+            ]),
+            default: r(() => [
+              b("div", ne, [
+                e[9] || (e[9] = b("div", { class: "save-setting" }, "保存设置", -1)),
+                d(l, {
+                  modelValue: o.state.checked,
+                  "onUpdate:modelValue": e[0] || (e[0] = (v) => o.state.checked = v),
+                  name: "tiny-checkbox"
+                }, {
+                  default: r(() => e[5] || (e[5] = [
+                    k("自动保存")
+                  ])),
+                  _: 1
+                }, 8, ["modelValue"]),
+                b("div", ae, [
+                  e[6] || (e[6] = b("div", null, "保存间隔", -1)),
+                  d(m, {
+                    modelValue: o.state.timeValue,
+                    "onUpdate:modelValue": e[1] || (e[1] = (v) => o.state.timeValue = v),
+                    options: o.delayOptions,
+                    disabled: !o.state.checked,
+                    autocomplete: ""
+                  }, null, 8, ["modelValue", "options", "disabled"])
+                ]),
+                b("div", se, [
+                  d(c, { onClick: o.cancel }, {
+                    default: r(() => e[7] || (e[7] = [
+                      k("取消")
+                    ])),
+                    _: 1
+                  }, 8, ["onClick"]),
+                  d(c, {
+                    type: "primary",
+                    onClick: o.autoSave
                   }, {
-                    default: l(() => e[5] || (e[5] = [
-                      b("自动保存")
+                    default: r(() => e[8] || (e[8] = [
+                      k("设置并保存")
                     ])),
                     _: 1
-                  }, 8, ["modelValue"]),
-                  v("div", ne, [
-                    e[6] || (e[6] = v("div", null, "保存间隔", -1)),
-                    i(d, {
-                      modelValue: t.state.timeValue,
-                      "onUpdate:modelValue": e[1] || (e[1] = (m) => t.state.timeValue = m),
-                      options: t.options,
-                      disabled: !t.state.checked,
-                      autocomplete: ""
-                    }, null, 8, ["modelValue", "options", "disabled"])
-                  ]),
-                  v("div", ae, [
-                    i(c, { onClick: t.cancel }, {
-                      default: l(() => e[7] || (e[7] = [
-                        b("取消")
-                      ])),
-                      _: 1
-                    }, 8, ["onClick"]),
-                    i(c, {
-                      type: "primary",
-                      onClick: t.autoSave
-                    }, {
-                      default: l(() => e[8] || (e[8] = [
-                        b("设置并保存")
-                      ])),
-                      _: 1
-                    }, 8, ["onClick"])
-                  ])
+                  }, 8, ["onClick"])
                 ])
-              ]),
-              _: 1
-            }, 8, ["modelValue"])
-          ])
-        ]),
-        _: 1
-      }, 8, ["onClick"])
-    ]),
-    i(P, {
-      class: "dialog-box",
-      modal: !1,
-      fullscreen: !0,
-      "append-to-body": !0,
-      visible: t.state.visible,
-      title: "Schema 本地与线上差异",
-      "onUpdate:visible": e[4] || (e[4] = (m) => t.state.visible = m)
-    }, {
-      footer: l(() => [
-        i(c, { onClick: t.close }, {
-          default: l(() => e[10] || (e[10] = [
-            b("取 消")
-          ])),
-          _: 1
-        }, 8, ["onClick"]),
-        i(c, {
-          type: "primary",
-          onClick: t.saveApi
+              ])
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ])
+      ]),
+      default: r(() => [
+        d(f, {
+          class: "dialog-box",
+          modal: !1,
+          fullscreen: !0,
+          "append-to-body": !0,
+          visible: o.state.visible,
+          title: "Schema 本地与线上差异",
+          "onUpdate:visible": e[4] || (e[4] = (v) => o.state.visible = v)
         }, {
-          default: l(() => e[11] || (e[11] = [
-            b("保 存")
-          ])),
+          footer: r(() => [
+            d(c, { onClick: o.close }, {
+              default: r(() => e[10] || (e[10] = [
+                k("取 消")
+              ])),
+              _: 1
+            }, 8, ["onClick"]),
+            d(c, {
+              type: "primary",
+              onClick: o.saveApi
+            }, {
+              default: r(() => e[11] || (e[11] = [
+                k("保 存")
+              ])),
+              _: 1
+            }, 8, ["onClick"])
+          ]),
+          default: r(() => [
+            o.state.visible ? (x(), U(C, {
+              key: 0,
+              ref: "editor",
+              class: "monaco-editor",
+              diffEditor: !0,
+              options: o.editorOptions,
+              value: o.state.code,
+              original: o.state.originalCode
+            }, null, 8, ["options", "value", "original"])) : h("", !0)
+          ]),
           _: 1
-        }, 8, ["onClick"])
-      ]),
-      default: l(() => [
-        t.state.visible ? (C(), U(B, {
-          key: 0,
-          ref: "editor",
-          class: "monaco-editor",
-          diffEditor: !0,
-          options: t.editorOptions,
-          value: t.state.code,
-          original: t.state.originalCode
-        }, null, 8, ["options", "value", "original"])) : D("", !0)
+        }, 8, ["visible"])
       ]),
       _: 1
-    }, 8, ["visible"])
-  ], 64);
+    }, 8, ["content", "icon", "options", "onClickApi"])
+  ]);
 }
-const ie = /* @__PURE__ */ Z($, [["render", se], ["__scopeId", "data-v-159e4497"]]), le = {
-  id: "engine.toolbars.save",
-  type: "toolbars",
-  title: "save",
-  icon: "",
-  align: "right"
-}, fe = {
-  ...le,
-  entry: ie,
-  apis: I
+const le = /* @__PURE__ */ $(oe, [["render", ie], ["__scopeId", "data-v-3b390d29"]]), fe = {
+  ...A,
+  entry: le,
+  apis: ee
 };
 export {
   fe as default

package/dist/style.css

@@ -1 +1 @@
-.dots[data-v-159e4497]{width:6px;height:6px;background:var(--ti-lowcode-toolbar-dot-color);border-radius:50%;display:inline-block;position:absolute;top:4px;right:3px;z-index:100}.toolbar-save .save-button[data-v-159e4497]{background-color:var(--ti-lowcode-toolbar-button-bg);border:none;min-width:70px;height:26px;display:flex;align-items:center;padding:0 8px;border-radius:4px}.toolbar-save .save-button[data-v-159e4497]:not(.disabled):hover{background-color:var(--ti-lowcode-toolbar-button-bg)}.toolbar-save .save-button .save-title[data-v-159e4497]{margin:0 6px}.toolbar-save[data-v-159e4497] .icon-down-arrow:focus{outline:none}.save-style[data-v-159e4497]{padding:14px;font-size:12px}.save-style .save-button-group[data-v-159e4497]{text-align:right}.save-style .save-button-group[data-v-159e4497] .tiny-button{min-width:40px;padding:0 8px;height:26px;line-height:24px;border-radius:4px}.save-time[data-v-159e4497]{line-height:24px;font-size:12px;margin:13px 0 14px;display:flex}.save-time .tiny-select[data-v-159e4497]{width:103px;margin-left:12px}.save-time .tiny-select[data-v-159e4497] .tiny-input__suffix{width:12px;top:12px}#saving[data-v-159e4497]{cursor:not-allowed;color:var(--ti-lowcode-disabled-color)}#saving[data-v-159e4497] svg{color:var(--ti-lowcode-disabled-color)}.dialog-box[data-v-159e4497] .tiny-dialog-box{display:flex;flex-direction:column}.dialog-box[data-v-159e4497] .tiny-dialog-box .tiny-dialog-box__body{flex:1}.dialog-box .monaco-editor[data-v-159e4497]{width:100%;height:100%}.changeRole a{color:var(--ti-lowcode-canvas-handle-hover-bg);padding:0 5px}
+.dots[data-v-3b390d29]{width:6px;height:6px;background:var(--ti-lowcode-toolbar-dot-color);border-radius:50%;display:inline-block;position:absolute;top:4px;right:3px;z-index:100}.toolbar-save .save-button[data-v-3b390d29]{background-color:var(--ti-lowcode-toolbar-button-bg);border:none;min-width:70px;height:26px;display:flex;align-items:center;padding:0 8px;border-radius:4px}.toolbar-save .save-button[data-v-3b390d29]:not(.disabled):hover{background-color:var(--ti-lowcode-toolbar-button-bg)}.toolbar-save .save-button .save-title[data-v-3b390d29]{margin:0 6px}.toolbar-save[data-v-3b390d29] .icon-down-arrow:focus{outline:none}.save-style[data-v-3b390d29]{padding:14px;font-size:12px}.save-style .save-button-group[data-v-3b390d29]{text-align:right}.save-style .save-button-group[data-v-3b390d29] .tiny-button{min-width:40px;padding:0 8px;height:26px;line-height:24px;border-radius:4px}.save-time[data-v-3b390d29]{line-height:24px;font-size:12px;margin:13px 0 14px;display:flex}.save-time .tiny-select[data-v-3b390d29]{width:103px;margin-left:12px}.save-time .tiny-select[data-v-3b390d29] .tiny-input__suffix{width:12px;top:12px}#saving[data-v-3b390d29]{cursor:not-allowed;color:var(--ti-lowcode-disabled-color)}#saving[data-v-3b390d29] svg{color:var(--ti-lowcode-disabled-color)}.dialog-box[data-v-3b390d29] .tiny-dialog-box{display:flex;flex-direction:column}.dialog-box[data-v-3b390d29] .tiny-dialog-box .tiny-dialog-box__body{flex:1}.dialog-box .monaco-editor[data-v-3b390d29]{width:100%;height:100%}.changeRole a{color:var(--ti-lowcode-canvas-handle-hover-bg);padding:0 5px}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-save",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.4",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "build": "vite build"
   },
+  "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "files": [
@@ -24,19 +25,19 @@
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
-    "@opentiny/tiny-engine-common": "2.0.0-alpha.2",
-    "@opentiny/tiny-engine-meta-register": "2.0.0-alpha.2",
-    "@opentiny/tiny-engine-utils": "2.0.0-alpha.2"
+    "@opentiny/tiny-engine-common": "2.0.0-alpha.4",
+    "@opentiny/tiny-engine-meta-register": "2.0.0-alpha.4",
+    "@opentiny/tiny-engine-utils": "2.0.0-alpha.4"
   },
   "devDependencies": {
-    "@opentiny/tiny-engine-vite-plugin-meta-comments": "2.0.0-alpha.2",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^3.1.0",
-    "vite": "^4.3.7"
+    "@opentiny/tiny-engine-vite-plugin-meta-comments": "2.0.0-alpha.4",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "vite": "^5.4.2"
   },
   "peerDependencies": {
     "@opentiny/vue": "^3.14.0",
     "vue": "^3.4.15"
   },
-  "gitHead": "695ecd00f21aa39965a9ddb02590ae274f92cd8e"
+  "gitHead": "14f9f41f9fa6a1b4962d0fcd3083798d842e8ff9"
 }