@opentiny/tiny-engine-toolbar-media 2.1.0-rc.0 → 2.2.0-beta.3

package/dist/index.js

@@ -1,20 +1,20 @@
 import "./style.css";
-import { ref as C, computed as E, reactive as Y, toRaw as Z, watch as F, watchEffect as $, onMounted as ee, onUnmounted as te, resolveComponent as _, openBlock as v, createBlock as W, withCtx as p, createElementVNode as t, createElementBlock as I, Fragment as ne, renderList as oe, normalizeClass as ie, createVNode as f, createTextVNode as D, toDisplayString as r, createCommentVNode as N, pushScopeId as ae, popScopeId as se } from "vue";
-import { Popover as le, Input as de, Switch as ce } from "@opentiny/vue";
-import { IconWebPlus as P } from "@opentiny/vue-icon";
-import { useLayout as g, useCanvas as L } from "@opentiny/tiny-engine-meta-register";
-import { ToolbarBase as re } from "@opentiny/tiny-engine-common";
-const pe = (d, l) => {
-  const c = d.__vccOpts || d;
-  for (const [n, u] of l)
-    c[n] = u;
-  return c;
-}, ue = {
+import { ref as _, computed as B, reactive as X, toRaw as Y, watch as E, watchEffect as Z, onMounted as $, onUnmounted as ee, resolveComponent as f, openBlock as v, createBlock as T, withCtx as c, createElementVNode as t, createElementBlock as W, Fragment as te, renderList as ne, normalizeClass as ie, createVNode as g, createTextVNode as I, toDisplayString as r, createCommentVNode as D } from "vue";
+import { Popover as oe, Input as ae, Switch as le } from "@opentiny/vue";
+import { IconWebPlus as N } from "@opentiny/vue-icon";
+import { useLayout as V, useCanvas as F } from "@opentiny/tiny-engine-meta-register";
+import { ToolbarBase as se } from "@opentiny/tiny-engine-common";
+const de = (h, n) => {
+  const d = h.__vccOpts || h;
+  for (const [i, p] of n)
+    d[i] = p;
+  return d;
+}, re = {
   components: {
-    TinyPopover: le,
-    TinyInput: de,
-    TinySwitch: ce,
-    ToolbarBase: re
+    TinyPopover: oe,
+    TinyInput: ae,
+    TinySwitch: le,
+    ToolbarBase: se
   },
   props: {
     data: {
@@ -30,9 +30,9 @@ const pe = (d, l) => {
       default: () => ({})
     }
   },
-  setup(d, { emit: l }) {
-    let c = null, n = "", u = "";
-    const { layoutState: w } = g(), m = C(!1), b = C(!1), h = C(!1), { getCanvasType: y } = L().canvasApi.value, T = C((y == null ? void 0 : y()) === "absolute"), o = E(() => g().getDimension()), x = E(() => o.value.scale * 100), i = Y({
+  setup(h, { emit: n }) {
+    let d = null, i = "", p = "";
+    const { layoutState: w } = V(), u = _(!1), b = _(!1), m = _(!1), { getCanvasType: y } = F().canvasApi.value, C = _((y == null ? void 0 : y()) === "absolute"), o = B(() => V().getDimension()), x = B(() => o.value.scale * 100), a = X({
       activeIndex: 0,
       guideValue: "",
       width: "",
@@ -43,15 +43,15 @@ const pe = (d, l) => {
         title: "添加大断点",
         list: [
           {
-            icon: P(),
+            icon: N(),
             text: "1280px"
           },
           {
-            icon: P(),
+            icon: N(),
             text: "1440px"
           },
           {
-            icon: P(),
+            icon: N(),
             text: "1920px"
           }
         ],
@@ -149,220 +149,220 @@ const pe = (d, l) => {
           enContent: "styles added here will apply at 480px and down."
         }
       ]
-    }), O = () => {
+    }), L = () => {
       b.value = !1;
-    }, U = () => {
-      c = setTimeout(() => {
-        m.value = !0;
+    }, O = () => {
+      d = setTimeout(() => {
+        u.value = !0;
       }, 1e3);
+    }, U = () => {
+      u.value = !1, clearTimeout(d);
     }, j = () => {
-      m.value = !1, clearTimeout(c);
+      w.toolbars.visiblePopover = !0, m.value = !0;
     }, q = () => {
-      w.toolbars.visiblePopover = !0, h.value = !0;
-    }, z = () => {
-      w.toolbars.visiblePopover = !1, h.value = !1;
-    }, S = (e) => {
-      const a = document.querySelector(".reference-text"), s = a == null ? void 0 : a.contains(e.target);
-      a !== e.target && !s && (w.toolbars.visiblePopover = !1);
-    }, k = i.media.reduce((e, a, s) => (e[a.view] = { ...Z(a), index: s }, e), {}), M = (e) => {
-      d.isCanvas ? g().setDimension({
+      w.toolbars.visiblePopover = !1, m.value = !1;
+    }, P = (e) => {
+      const l = document.querySelector(".reference-text"), s = l == null ? void 0 : l.contains(e.target);
+      l !== e.target && !s && (w.toolbars.visiblePopover = !1);
+    }, k = a.media.reduce((e, l, s) => (e[l.view] = { ...Y(l), index: s }, e), {}), S = (e) => {
+      h.isCanvas ? V().setDimension({
         deviceType: e.view,
         width: e.width,
         minWidth: e.minWidth,
         maxWidth: e.maxWidth
-      }) : (i.activeIndex = e.idx, l("setViewPort", e.width));
-    }, R = (e, a) => {
-      const s = k[a];
-      g().setDimension({
+      }) : (a.activeIndex = e.idx, n("setViewPort", e.width));
+    }, z = (e, l) => {
+      const s = k[l];
+      V().setDimension({
         deviceType: s.view,
         width: e ? `${e}px` : s.width,
         minWidth: s.minWidth,
         maxWidth: s.maxWidth
       });
-    }, G = [
+    }, R = [
       { type: "mobile", min: 240, max: 480 },
       { type: "lanMobile", min: 480, max: 768 },
       { type: "tablet", min: 768, max: 992 },
       { type: "desktop", min: 992, max: 1200 },
       { type: "mdx", min: 1200, max: 1920 }
-    ], H = (e) => {
-      var A;
-      const a = /^\d+$/;
-      String(e).match(a) ? Number(e) < 240 ? i.width = 240 : Number(e) > 1920 ? i.width = 1920 : i.width = e : i.width = n || parseInt(o.value.width, 10);
-      const s = Number(i.width), X = ((A = G.find((B) => B.min <= s && s <= B.max)) == null ? void 0 : A.type) || "desktop";
-      R(s, X);
-    }, J = (e) => {
-      const a = k.mdx, s = /^\d+(\.\d+)?$/;
-      String(e).match(s) ? Number(e) > 100 ? i.scaleValue = 100 : Number(e) < 20 ? i.scaleValue = 20 : i.scaleValue = e : i.scaleValue = u || parseInt(a.scale), i.scaleValue = Number(i.scaleValue).toFixed(2), g().setDimension({
-        scale: Number(i.scaleValue) / 100
+    ], G = (e) => {
+      var M;
+      const l = /^\d+$/;
+      String(e).match(l) ? Number(e) < 240 ? a.width = 240 : Number(e) > 1920 ? a.width = 1920 : a.width = e : a.width = i || parseInt(o.value.width, 10);
+      const s = Number(a.width), Q = ((M = R.find((A) => A.min <= s && s <= A.max)) == null ? void 0 : M.type) || "desktop";
+      z(s, Q);
+    }, H = (e) => {
+      const l = k.mdx, s = /^\d+(\.\d+)?$/;
+      String(e).match(s) ? Number(e) > 100 ? a.scaleValue = 100 : Number(e) < 20 ? a.scaleValue = 20 : a.scaleValue = e : a.scaleValue = p || parseInt(l.scale), a.scaleValue = Number(a.scaleValue).toFixed(2), V().setDimension({
+        scale: Number(a.scaleValue) / 100
       });
-    }, K = (e) => {
-      const { setCanvasType: a } = L().canvasApi.value;
-      a(e ? "absolute" : "normal");
+    }, J = (e) => {
+      const { setCanvasType: l } = F().canvasApi.value;
+      l(e ? "absolute" : "normal");
     };
-    F(
+    E(
       () => o.value.deviceType,
       (e) => {
-        i.activeIndex = k[e].index, i.readonly = e !== "mdx";
+        a.activeIndex = k[e].index, a.readonly = e !== "mdx";
       },
       { immediate: !0 }
-    ), $(() => {
-      i.scaleValue = x.value.toFixed(2), u = x.value;
-    }), F(
+    ), Z(() => {
+      a.scaleValue = x.value.toFixed(2), p = x.value;
+    }), E(
       () => o.value.width,
       (e) => {
-        const a = parseInt(e, 10);
-        Number.isInteger(a) && (i.width = a, n = a);
+        const l = parseInt(e, 10);
+        Number.isInteger(l) && (a.width = l, i = l);
       }
-    ), ee(() => {
-      document.addEventListener("click", S);
-    }), te(() => {
-      document.removeEventListener("click", S);
+    ), $(() => {
+      document.addEventListener("click", P);
+    }), ee(() => {
+      document.removeEventListener("click", P);
     });
-    const Q = o.value.deviceType || "desktop";
-    return M(k[Q]), {
+    const K = o.value.deviceType || "desktop";
+    return S(k[K]), {
       scale: x,
-      state: i,
+      state: a,
       active: b,
-      flag: h,
-      hide: O,
+      flag: m,
+      hide: L,
       layoutState: w,
-      visible: m,
-      showTips: U,
-      hideTips: j,
-      timer: c,
+      visible: u,
+      showTips: O,
+      hideTips: U,
+      timer: d,
       dimension: o,
-      setViewPort: M,
-      showPopover: q,
-      hidePopover: z,
-      widthChange: H,
-      scaleChange: J,
-      isAbsolute: T,
-      changeCanvasType: K
+      setViewPort: S,
+      showPopover: j,
+      hidePopover: q,
+      widthChange: G,
+      scaleChange: H,
+      isAbsolute: C,
+      changeCanvasType: J
     };
   }
-}, V = (d) => (ae("data-v-036ff61a"), d = d(), se(), d), me = { class: "toolbar-wrap" }, he = { class: "toolbar-icon-wrap" }, xe = ["onClick"], ve = { class: "media-content" }, we = { class: "media-title" }, be = {
+}, ce = { class: "toolbar-wrap" }, pe = { class: "toolbar-icon-wrap" }, ue = ["onClick"], me = { class: "media-content" }, xe = { class: "media-title" }, ve = {
   key: 0,
   class: "sub-title"
-}, ye = { class: "content" }, _e = {
+}, he = { class: "content" }, we = {
   class: "reference-text",
   title: "画布设置"
-}, fe = /* @__PURE__ */ V(() => /* @__PURE__ */ t("span", { class: "symbol" }, "px", -1)), ge = /* @__PURE__ */ V(() => /* @__PURE__ */ t("span", { class: "symbol" }, "%", -1)), Ve = { class: "content-wrap text-content" }, ke = { class: "title text-title" }, Ce = { class: "setting" }, Te = /* @__PURE__ */ V(() => /* @__PURE__ */ t("span", null, "px", -1)), We = /* @__PURE__ */ V(() => /* @__PURE__ */ t("span", null, "%", -1)), Ie = /* @__PURE__ */ V(() => /* @__PURE__ */ t("label", null, /* @__PURE__ */ r("自由布局"), -1));
-function De(d, l, c, n, u, w) {
-  const m = _("svg-icon"), b = _("tiny-popover"), h = _("tiny-input"), y = _("tiny-switch"), T = _("toolbar-base");
-  return v(), W(T, { options: c.options }, {
-    default: p(() => [
-      t("div", me, [
-        t("div", he, [
-          (v(!0), I(ne, null, oe(n.state.media, (o, x) => (v(), I("span", {
+}, be = { class: "content-wrap text-content" }, ye = { class: "title text-title" }, fe = { class: "setting" };
+function ge(h, n, d, i, p, w) {
+  const u = f("svg-icon"), b = f("tiny-popover"), m = f("tiny-input"), y = f("tiny-switch"), C = f("toolbar-base");
+  return v(), T(C, { options: d.options }, {
+    default: c(() => [
+      t("div", ce, [
+        t("div", pe, [
+          (v(!0), W(te, null, ne(i.state.media, (o, x) => (v(), W("span", {
             key: x,
-            class: ie(["icon", { active: n.state.activeIndex === x, "is-rotate": o.view === "lanMobile" }]),
-            onClick: (i) => n.setViewPort(o)
+            class: ie(["icon", { active: i.state.activeIndex === x, "is-rotate": o.view === "lanMobile" }]),
+            onClick: (a) => i.setViewPort(o)
           }, [
-            f(b, {
+            g(b, {
               trigger: "hover",
               width: "260",
               "append-to-body": "",
               "open-delay": 1e3,
               "popper-class": "media-icon-popover"
             }, {
-              reference: p(() => [
-                f(m, {
+              reference: c(() => [
+                g(u, {
                   name: o.liked,
                   class: "media-icon"
                 }, null, 8, ["name"])
               ]),
-              default: p(() => [
-                t("div", ve, [
-                  t("div", we, [
+              default: c(() => [
+                t("div", me, [
+                  t("div", xe, [
                     t("div", null, [
-                      D(r(o.title) + " ", 1),
-                      o.subTitle ? (v(), I("span", be, [
-                        D(" （"),
-                        o.view === "desktop" ? (v(), W(m, {
+                      I(r(o.title) + " ", 1),
+                      o.subTitle ? (v(), W("span", ve, [
+                        n[3] || (n[3] = I(" （")),
+                        o.view === "desktop" ? (v(), T(u, {
                           key: 0,
                           name: "stars"
-                        })) : N("", !0),
+                        })) : D("", !0),
                         t("span", null, r(o.subTitle), 1),
-                        D("） ")
-                      ])) : N("", !0)
+                        n[4] || (n[4] = I("） "))
+                      ])) : D("", !0)
                     ])
                   ]),
-                  t("div", ye, r(o.content), 1)
+                  t("div", he, r(o.content), 1)
                 ])
               ]),
               _: 2
             }, 1024)
-          ], 10, xe))), 128))
+          ], 10, ue))), 128))
         ]),
-        c.isCanvas ? (v(), W(b, {
+        d.isCanvas ? (v(), T(b, {
           key: 0,
           width: "200",
           trigger: "click",
           "popper-class": "toolbar-media-popper"
         }, {
-          reference: p(() => [
-            t("span", _e, [
+          reference: c(() => [
+            t("span", we, [
               t("span", null, [
-                t("span", null, r(parseInt(n.state.width)), 1),
-                fe
+                t("span", null, r(parseInt(i.state.width)), 1),
+                n[5] || (n[5] = t("span", { class: "symbol" }, "px", -1))
               ]),
               t("span", null, [
-                t("span", null, r(n.scale.toFixed(2)), 1),
-                ge
+                t("span", null, r(i.scale.toFixed(2)), 1),
+                n[6] || (n[6] = t("span", { class: "symbol" }, "%", -1))
               ])
             ])
           ]),
-          default: p(() => [
-            t("div", Ve, [
-              t("div", ke, r(n.state.textData.title), 1),
-              t("div", Ce, [
+          default: c(() => [
+            t("div", be, [
+              t("div", ye, r(i.state.textData.title), 1),
+              t("div", fe, [
                 t("div", null, [
-                  t("label", null, r(n.state.textData.width), 1),
-                  f(h, {
-                    modelValue: n.state.width,
-                    "onUpdate:modelValue": l[0] || (l[0] = (o) => n.state.width = o),
-                    onChange: n.widthChange
+                  t("label", null, r(i.state.textData.width), 1),
+                  g(m, {
+                    modelValue: i.state.width,
+                    "onUpdate:modelValue": n[0] || (n[0] = (o) => i.state.width = o),
+                    onChange: i.widthChange
                   }, {
-                    suffix: p(() => [
-                      Te
-                    ]),
+                    suffix: c(() => n[7] || (n[7] = [
+                      t("span", null, "px", -1)
+                    ])),
                     _: 1
                   }, 8, ["modelValue", "onChange"])
                 ]),
                 t("div", null, [
-                  t("label", null, r(n.state.textData.scale), 1),
-                  f(h, {
-                    modelValue: n.state.scaleValue,
-                    "onUpdate:modelValue": l[1] || (l[1] = (o) => n.state.scaleValue = o),
-                    readonly: n.state.readonly,
-                    onChange: n.scaleChange
+                  t("label", null, r(i.state.textData.scale), 1),
+                  g(m, {
+                    modelValue: i.state.scaleValue,
+                    "onUpdate:modelValue": n[1] || (n[1] = (o) => i.state.scaleValue = o),
+                    readonly: i.state.readonly,
+                    onChange: i.scaleChange
                   }, {
-                    suffix: p(() => [
-                      We
-                    ]),
+                    suffix: c(() => n[8] || (n[8] = [
+                      t("span", null, "%", -1)
+                    ])),
                     _: 1
                   }, 8, ["modelValue", "readonly", "onChange"])
                 ]),
                 t("div", null, [
-                  Ie,
-                  f(y, {
-                    modelValue: n.isAbsolute,
-                    "onUpdate:modelValue": l[2] || (l[2] = (o) => n.isAbsolute = o),
-                    onChange: n.changeCanvasType
+                  n[9] || (n[9] = t("label", null, r("自由布局"), -1)),
+                  g(y, {
+                    modelValue: i.isAbsolute,
+                    "onUpdate:modelValue": n[2] || (n[2] = (o) => i.isAbsolute = o),
+                    onChange: i.changeCanvasType
                   }, null, 8, ["modelValue", "onChange"])
                 ])
               ])
             ])
           ]),
           _: 1
-        })) : N("", !0)
+        })) : D("", !0)
       ])
     ]),
     _: 1
   }, 8, ["options"]);
 }
-const Ne = /* @__PURE__ */ pe(ue, [["render", De], ["__scopeId", "data-v-036ff61a"]]), Pe = {
+const Ve = /* @__PURE__ */ de(re, [["render", ge], ["__scopeId", "data-v-59127aa7"]]), ke = {
   id: "engine.toolbars.media",
   type: "toolbars",
   title: "media",
@@ -372,10 +372,10 @@ const Ne = /* @__PURE__ */ pe(ue, [["render", De], ["__scopeId", "data-v-036ff61
     },
     renderType: "slot"
   }
-}, Le = {
-  ...Pe,
-  entry: Ne
+}, Ne = {
+  ...ke,
+  entry: Ve
 };
 export {
-  Le as default
+  Ne as default
 };

package/dist/style.css

@@ -1 +1 @@
-.toolbar-wrap[data-v-036ff61a]{display:flex;align-items:center}.toolbar-wrap .reference-text[data-v-036ff61a]{cursor:pointer;height:var(--base-top-panel-height);line-height:var(--base-top-panel-height);padding:0 7px;color:var(--ti-lowcode-toolbar-breadcrumb-color);display:inline-block}.toolbar-wrap .reference-text>span[data-v-036ff61a]:last-child{margin-left:8px}.toolbar-wrap .toolbar-icon-wrap[data-v-036ff61a]{display:flex;flex-wrap:nowrap;align-items:center;gap:6px}.toolbar-wrap .toolbar-icon-wrap .icon[data-v-036ff61a]{width:24px;height:24px;display:inline-flex;justify-content:center;align-items:center;border-radius:4px}.toolbar-wrap .toolbar-icon-wrap .icon svg[data-v-036ff61a]{cursor:pointer;color:var(--ti-lowcode-toolbar-title-color);outline:none;width:18px;height:18px;margin-top:-.5px}.toolbar-wrap .toolbar-icon-wrap .icon.active[data-v-036ff61a],.toolbar-wrap .toolbar-icon-wrap .icon[data-v-036ff61a]:hover{background:var(--ti-lowcode-toolbar-view-active-bg)}.toolbar-wrap .toolbar-icon-wrap .icon.active svg[data-v-036ff61a]{color:var(--ti-lowcode-common-primary-color)}.toolbar-wrap .more-setting .setting-item[data-v-036ff61a]{display:flex;justify-content:space-between;padding:12px}.media-content[data-v-036ff61a]{padding:12px 8px;line-height:18px}.media-content .media-title[data-v-036ff61a]{font-weight:600}.media-content .content[data-v-036ff61a]{color:var(--te-common-text-secondary)}.setting-content[data-v-036ff61a]{padding:12px 8px}.content-wrap[data-v-036ff61a]{padding:20px 12px}.content-wrap .title[data-v-036ff61a]{font-weight:600;margin-bottom:16px}.content-wrap .setting[data-v-036ff61a]{display:flex;flex-direction:column;gap:12px}.content-wrap .setting div[data-v-036ff61a]{display:flex;align-items:center;justify-content:space-between}.content-wrap .setting div label[data-v-036ff61a]{color:var(--te-common-text-secondary);min-width:64px}.content-wrap .setting div[data-v-036ff61a]:last-child{justify-content:flex-start}
+.toolbar-wrap[data-v-59127aa7]{display:flex;align-items:center}.toolbar-wrap .reference-text[data-v-59127aa7]{cursor:pointer;height:var(--base-top-panel-height);line-height:var(--base-top-panel-height);padding:0 7px;color:var(--ti-lowcode-toolbar-breadcrumb-color);display:inline-block}.toolbar-wrap .reference-text>span[data-v-59127aa7]:last-child{margin-left:8px}.toolbar-wrap .toolbar-icon-wrap[data-v-59127aa7]{display:flex;flex-wrap:nowrap;align-items:center;gap:6px}.toolbar-wrap .toolbar-icon-wrap .icon[data-v-59127aa7]{width:24px;height:24px;display:inline-flex;justify-content:center;align-items:center;border-radius:4px}.toolbar-wrap .toolbar-icon-wrap .icon svg[data-v-59127aa7]{cursor:pointer;color:var(--ti-lowcode-toolbar-title-color);outline:none;width:18px;height:18px;margin-top:-.5px}.toolbar-wrap .toolbar-icon-wrap .icon.active[data-v-59127aa7],.toolbar-wrap .toolbar-icon-wrap .icon[data-v-59127aa7]:hover{background:var(--ti-lowcode-toolbar-view-active-bg)}.toolbar-wrap .toolbar-icon-wrap .icon.active svg[data-v-59127aa7]{color:var(--ti-lowcode-common-primary-color)}.toolbar-wrap .more-setting .setting-item[data-v-59127aa7]{display:flex;justify-content:space-between;padding:12px}.media-content[data-v-59127aa7]{line-height:18px}.media-content .media-title[data-v-59127aa7]{font-weight:600}.media-content .content[data-v-59127aa7]{color:var(--te-common-text-secondary)}.setting-content[data-v-59127aa7]{padding:12px 8px}.content-wrap .title[data-v-59127aa7]{font-weight:600;margin-bottom:16px}.content-wrap .setting[data-v-59127aa7]{display:flex;flex-direction:column;gap:12px}.content-wrap .setting div[data-v-59127aa7]{display:flex;align-items:center;justify-content:space-between}.content-wrap .setting div label[data-v-59127aa7]{color:var(--te-common-text-secondary);min-width:64px}.content-wrap .setting div[data-v-59127aa7]:last-child{justify-content:flex-start}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-media",
-  "version": "2.1.0-rc.0",
+  "version": "2.2.0-beta.3",
   "publishConfig": {
     "access": "public"
   },
@@ -25,11 +25,11 @@
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
-    "@opentiny/tiny-engine-common": "2.1.0-rc.0",
-    "@opentiny/tiny-engine-meta-register": "2.1.0-rc.0"
+    "@opentiny/tiny-engine-common": "2.2.0-beta.3",
+    "@opentiny/tiny-engine-meta-register": "2.2.0-beta.3"
   },
   "devDependencies": {
-    "@opentiny/tiny-engine-vite-plugin-meta-comments": "2.1.0-rc.0",
+    "@opentiny/tiny-engine-vite-plugin-meta-comments": "2.2.0-beta.3",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
     "vite": "^5.4.2"
@@ -39,5 +39,5 @@
     "@opentiny/vue-icon": "^3.14.0",
     "vue": "^3.4.15"
   },
-  "gitHead": "71a3549d5f1d38d2ed3934ce83b722b11878aa7c"
+  "gitHead": "04459f34e5ebdaca92355f7698cd4fea19f7ef95"
 }