@opentiny/tiny-engine-toolbar-media 1.0.3 → 1.0.4

package/dist/index.js

@@ -1,18 +1,17 @@
 import "./style.css";
-import { ref as V, computed as E, reactive as K, toRaw as Q, watch as F, watchEffect as Y, onMounted as Z, onUnmounted as $, resolveComponent as k, openBlock as w, createElementBlock as C, createElementVNode as t, Fragment as ee, renderList as te, normalizeClass as ne, createVNode as _, withCtx as p, toDisplayString as c, createTextVNode as W, createBlock as L, createCommentVNode as I, pushScopeId as oe, popScopeId as ie } from "vue";
-import { Popover as ae, Input as se, Switch as le } from "@opentiny/vue";
+import { ref as k, computed as A, reactive as Q, toRaw as Y, watch as E, watchEffect as Z, onMounted as $, onUnmounted as ee, resolveComponent as C, openBlock as x, createElementBlock as W, createElementVNode as t, Fragment as te, renderList as ne, normalizeClass as ie, createVNode as w, withCtx as p, toDisplayString as r, createTextVNode as T, createBlock as F, createCommentVNode as I } from "vue";
+import { Popover as oe, Input as ae, Switch as le } from "@opentiny/vue";
 import { IconWebPlus as P } from "@opentiny/vue-icon";
-import { useLayout as y } from "@opentiny/tiny-engine-controller";
-import { getCanvasType as de, setCanvasType as ce } from "@opentiny/tiny-engine-canvas";
-const re = (d, l) => {
-  const r = d.__vccOpts || d;
-  for (const [n, u] of l)
-    r[n] = u;
-  return r;
-}, pe = {
+import { useLayout as g, useCanvas as L } from "@opentiny/tiny-engine-controller";
+const se = (b, n) => {
+  const c = b.__vccOpts || b;
+  for (const [i, u] of n)
+    c[i] = u;
+  return c;
+}, de = {
   components: {
-    TinyPopover: ae,
-    TinyInput: se,
+    TinyPopover: oe,
+    TinyInput: ae,
     TinySwitch: le
   },
   props: {
@@ -25,9 +24,9 @@ const re = (d, l) => {
       default: !0
     }
   },
-  setup(d, { emit: l }) {
-    let r = null, n = "", u = "";
-    const { layoutState: b } = y(), m = V(!1), h = V(!1), v = V(!1), T = V(de() === "absolute"), o = E(() => y().getDimension()), x = E(() => o.value.scale * 100), i = K({
+  setup(b, { emit: n }) {
+    let c = null, i = "", u = "";
+    const { layoutState: y } = g(), m = k(!1), v = k(!1), h = k(!1), { getCanvasType: f } = L().canvasApi.value, l = k((f == null ? void 0 : f()) === "absolute"), d = A(() => g().getDimension()), _ = A(() => d.value.scale * 100), o = Q({
       activeIndex: 0,
       guideValue: "",
       width: "",
@@ -145,112 +144,111 @@ const re = (d, l) => {
         }
       ]
     }), B = () => {
-      h.value = !1;
+      v.value = !1;
     }, U = () => {
-      r = setTimeout(() => {
+      c = setTimeout(() => {
         m.value = !0;
       }, 1e3);
-    }, A = () => {
-      m.value = !1, clearTimeout(r);
     }, O = () => {
-      b.toolbars.visiblePopover = !0, v.value = !0;
+      m.value = !1, clearTimeout(c);
     }, X = () => {
-      b.toolbars.visiblePopover = !1, v.value = !1;
+      y.toolbars.visiblePopover = !0, h.value = !0;
+    }, q = () => {
+      y.toolbars.visiblePopover = !1, h.value = !1;
     }, D = (e) => {
       const a = document.querySelector(".reference-text"), s = a == null ? void 0 : a.contains(e.target);
-      a !== e.target && !s && (b.toolbars.visiblePopover = !1);
-    }, g = i.media.reduce((e, a, s) => (e[a.view] = { ...Q(a), index: s }, e), {}), N = (e) => {
-      d.isCanvas ? y().setDimension({
+      a !== e.target && !s && (y.toolbars.visiblePopover = !1);
+    }, V = o.media.reduce((e, a, s) => (e[a.view] = { ...Y(a), index: s }, e), {}), N = (e) => {
+      b.isCanvas ? g().setDimension({
         deviceType: e.view,
         width: e.width,
         minWidth: e.minWidth,
         maxWidth: e.maxWidth
-      }) : (i.activeIndex = e.idx, l("setViewPort", e.width));
-    }, q = (e, a) => {
-      const s = g[a];
-      y().setDimension({
+      }) : (o.activeIndex = e.idx, n("setViewPort", e.width));
+    }, z = (e, a) => {
+      const s = V[a];
+      g().setDimension({
         deviceType: s.view,
         width: e ? `${e}px` : s.width,
         minWidth: s.minWidth,
         maxWidth: s.maxWidth
       });
-    }, z = [
+    }, 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 }
-    ], R = (e) => {
+    ], j = (e) => {
       var S;
       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), J = ((S = z.find((M) => M.min <= s && s <= M.max)) == null ? void 0 : S.type) || "desktop";
-      q(s, J);
-    }, j = (e) => {
-      const a = g.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), y().setDimension({
-        scale: Number(i.scaleValue) / 100
-      });
+      String(e).match(a) ? Number(e) < 240 ? o.width = 240 : Number(e) > 1920 ? o.width = 1920 : o.width = e : o.width = i || parseInt(d.value.width, 10);
+      const s = Number(o.width), K = ((S = R.find((M) => M.min <= s && s <= M.max)) == null ? void 0 : S.type) || "desktop";
+      z(s, K);
     }, G = (e) => {
-      ce(e ? "absolute" : "normal");
+      const a = V.mdx, s = /^\d+(\.\d+)?$/;
+      String(e).match(s) ? Number(e) > 100 ? o.scaleValue = 100 : Number(e) < 20 ? o.scaleValue = 20 : o.scaleValue = e : o.scaleValue = u || parseInt(a.scale), o.scaleValue = Number(o.scaleValue).toFixed(2), g().setDimension({
+        scale: Number(o.scaleValue) / 100
+      });
+    }, H = (e) => {
+      const { setCanvasType: a } = L().canvasApi.value;
+      a(e ? "absolute" : "normal");
     };
-    F(
-      () => o.value.deviceType,
+    E(
+      () => d.value.deviceType,
       (e) => {
-        i.activeIndex = g[e].index, i.readonly = e !== "mdx";
+        o.activeIndex = V[e].index, o.readonly = e !== "mdx";
       },
       { immediate: !0 }
-    ), Y(() => {
-      i.scaleValue = x.value.toFixed(2), u = x.value;
-    }), F(
-      () => o.value.width,
+    ), Z(() => {
+      o.scaleValue = _.value.toFixed(2), u = _.value;
+    }), E(
+      () => d.value.width,
       (e) => {
         const a = parseInt(e, 10);
-        Number.isInteger(a) && (i.width = a, n = a);
+        Number.isInteger(a) && (o.width = a, i = a);
       }
-    ), Z(() => {
+    ), $(() => {
       document.addEventListener("click", D);
-    }), $(() => {
+    }), ee(() => {
       document.removeEventListener("click", D);
     });
-    const H = o.value.deviceType || "desktop";
-    return N(g[H]), {
-      scale: x,
-      state: i,
-      active: h,
-      flag: v,
+    const J = d.value.deviceType || "desktop";
+    return N(V[J]), {
+      scale: _,
+      state: o,
+      active: v,
+      flag: h,
       hide: B,
-      layoutState: b,
+      layoutState: y,
       visible: m,
       showTips: U,
-      hideTips: A,
-      timer: r,
-      dimension: o,
+      hideTips: O,
+      timer: c,
+      dimension: d,
       setViewPort: N,
-      showPopover: O,
-      hidePopover: X,
-      widthChange: R,
-      scaleChange: j,
-      isAbsolute: T,
-      changeCanvasType: G
+      showPopover: X,
+      hidePopover: q,
+      widthChange: j,
+      scaleChange: G,
+      isAbsolute: l,
+      changeCanvasType: H
     };
   }
-}, f = (d) => (oe("data-v-9eb930f1"), d = d(), ie(), d), ue = { class: "toolbar-wrap" }, me = { class: "toolbar-icon-wrap" }, he = ["onClick"], ve = { class: "media-content" }, xe = { class: "media-title" }, we = {
+}, re = { class: "toolbar-wrap" }, ce = { class: "toolbar-icon-wrap" }, pe = ["onClick"], ue = { class: "media-content" }, me = { class: "media-title" }, ve = {
   key: 0,
   class: "sub-title"
-}, _e = { class: "content" }, be = { class: "reference-text" }, ye = /* @__PURE__ */ f(() => /* @__PURE__ */ t("span", { class: "symbol" }, "PX", -1)), fe = /* @__PURE__ */ f(() => /* @__PURE__ */ t("span", { class: "symbol" }, "%", -1)), ge = { class: "content-wrap text-content" }, Ve = { class: "title text-title" }, ke = { class: "setting" }, Ce = { for: "" }, Te = /* @__PURE__ */ f(() => /* @__PURE__ */ t("span", null, "PX", -1)), We = { for: "" }, Ie = /* @__PURE__ */ f(() => /* @__PURE__ */ t("span", null, "%", -1)), Pe = { class: "more-setting" }, De = /* @__PURE__ */ f(() => /* @__PURE__ */ t("div", null, [
-  /* @__PURE__ */ t("span", null, /* @__PURE__ */ c("自由布局"))
-], -1));
-function Ne(d, l, r, n, u, b) {
-  const m = k("svg-icon"), h = k("tiny-popover"), v = k("tiny-input"), T = k("tiny-switch");
-  return w(), C("div", ue, [
-    t("div", me, [
-      (w(!0), C(ee, null, te(n.state.media, (o, x) => (w(), C("span", {
-        key: x,
-        class: ne(["icon", { active: n.state.activeIndex === x, "is-rotate": o.view === "lanMobile" }]),
-        onClick: (i) => n.setViewPort(o)
+}, he = { class: "content" }, xe = { class: "reference-text" }, we = { class: "content-wrap text-content" }, be = { class: "title text-title" }, ye = { class: "setting" }, fe = { for: "" }, ge = { for: "" }, _e = { class: "more-setting" };
+function Ve(b, n, c, i, u, y) {
+  const m = C("svg-icon"), v = C("tiny-popover"), h = C("tiny-input"), f = C("tiny-switch");
+  return x(), W("div", re, [
+    t("div", ce, [
+      (x(!0), W(te, null, ne(i.state.media, (l, d) => (x(), W("span", {
+        key: d,
+        class: ie(["icon", { active: i.state.activeIndex === d, "is-rotate": l.view === "lanMobile" }]),
+        onClick: (_) => i.setViewPort(l)
       }, [
-        _(h, {
+        w(v, {
           trigger: "hover",
           width: "225",
           "append-to-body": "",
@@ -258,41 +256,41 @@ function Ne(d, l, r, n, u, b) {
           "popper-class": "media-icon-popover"
         }, {
           reference: p(() => [
-            _(m, {
-              name: o.liked,
+            w(m, {
+              name: l.liked,
               class: "media-icon"
             }, null, 8, ["name"])
           ]),
           default: p(() => [
-            t("div", ve, [
-              t("div", xe, [
-                t("div", null, c(o.title), 1),
-                o.subTitle ? (w(), C("div", we, [
-                  W(" （"),
-                  o.view === "desktop" ? (w(), L(m, {
+            t("div", ue, [
+              t("div", me, [
+                t("div", null, r(l.title), 1),
+                l.subTitle ? (x(), W("div", ve, [
+                  n[3] || (n[3] = T(" （")),
+                  l.view === "desktop" ? (x(), F(m, {
                     key: 0,
                     name: "stars"
                   })) : I("", !0),
-                  W(),
-                  t("span", null, c(o.subTitle), 1),
-                  W("） ")
+                  n[4] || (n[4] = T()),
+                  t("span", null, r(l.subTitle), 1),
+                  n[5] || (n[5] = T("） "))
                 ])) : I("", !0)
               ]),
-              t("div", _e, c(o.content), 1)
+              t("div", he, r(l.content), 1)
             ])
           ]),
           _: 2
         }, 1024)
-      ], 10, he))), 128))
+      ], 10, pe))), 128))
     ]),
-    r.isCanvas ? (w(), L(h, {
+    c.isCanvas ? (x(), F(v, {
       key: 0,
       width: "290",
       trigger: "click",
       "popper-class": "toolbar-media-popper"
     }, {
       reference: p(() => [
-        _(h, {
+        w(v, {
           trigger: "hover",
           "open-delay": 1e3,
           "popper-class": "toolbar-right-popover",
@@ -300,14 +298,14 @@ function Ne(d, l, r, n, u, b) {
           content: "画布设置"
         }, {
           reference: p(() => [
-            t("span", be, [
+            t("span", xe, [
               t("span", null, [
-                t("span", null, c(parseInt(n.state.width)), 1),
-                ye
+                t("span", null, r(parseInt(i.state.width)), 1),
+                n[6] || (n[6] = t("span", { class: "symbol" }, "PX", -1))
               ]),
               t("span", null, [
-                t("span", null, c(n.scale.toFixed(2)), 1),
-                fe
+                t("span", null, r(i.scale.toFixed(2)), 1),
+                n[7] || (n[7] = t("span", { class: "symbol" }, "%", -1))
               ])
             ])
           ]),
@@ -315,45 +313,47 @@ function Ne(d, l, r, n, u, b) {
         })
       ]),
       default: p(() => [
-        t("div", ge, [
-          t("span", Ve, c(n.state.textData.title), 1),
-          t("div", ke, [
+        t("div", we, [
+          t("span", be, r(i.state.textData.title), 1),
+          t("div", ye, [
             t("div", null, [
-              t("label", Ce, c(n.state.textData.width), 1),
-              _(v, {
-                modelValue: n.state.width,
-                "onUpdate:modelValue": l[0] || (l[0] = (o) => n.state.width = o),
-                onChange: n.widthChange
+              t("label", fe, r(i.state.textData.width), 1),
+              w(h, {
+                modelValue: i.state.width,
+                "onUpdate:modelValue": n[0] || (n[0] = (l) => i.state.width = l),
+                onChange: i.widthChange
               }, {
-                suffix: p(() => [
-                  Te
-                ]),
+                suffix: p(() => n[8] || (n[8] = [
+                  t("span", null, "PX", -1)
+                ])),
                 _: 1
               }, 8, ["modelValue", "onChange"])
             ]),
             t("div", null, [
-              t("label", We, c(n.state.textData.scale), 1),
-              _(v, {
-                modelValue: n.state.scaleValue,
-                "onUpdate:modelValue": l[1] || (l[1] = (o) => n.state.scaleValue = o),
-                readonly: n.state.readonly,
-                onChange: n.scaleChange
+              t("label", ge, r(i.state.textData.scale), 1),
+              w(h, {
+                modelValue: i.state.scaleValue,
+                "onUpdate:modelValue": n[1] || (n[1] = (l) => i.state.scaleValue = l),
+                readonly: i.state.readonly,
+                onChange: i.scaleChange
               }, {
-                suffix: p(() => [
-                  Ie
-                ]),
+                suffix: p(() => n[9] || (n[9] = [
+                  t("span", null, "%", -1)
+                ])),
                 _: 1
               }, 8, ["modelValue", "readonly", "onChange"])
             ])
           ]),
-          t("ul", Pe, [
+          t("ul", _e, [
             t("li", null, [
-              De,
+              n[10] || (n[10] = t("div", null, [
+                t("span", null, r("自由布局"))
+              ], -1)),
               t("div", null, [
-                _(T, {
-                  modelValue: n.isAbsolute,
-                  "onUpdate:modelValue": l[2] || (l[2] = (o) => n.isAbsolute = o),
-                  onChange: n.changeCanvasType
+                w(f, {
+                  modelValue: i.isAbsolute,
+                  "onUpdate:modelValue": n[2] || (n[2] = (l) => i.isAbsolute = l),
+                  onChange: i.changeCanvasType
                 }, null, 8, ["modelValue", "onChange"])
               ])
             ])
@@ -364,13 +364,13 @@ function Ne(d, l, r, n, u, b) {
     })) : I("", !0)
   ]);
 }
-const Se = /* @__PURE__ */ re(pe, [["render", Ne], ["__scopeId", "data-v-9eb930f1"]]), Ae = {
+const ke = /* @__PURE__ */ se(de, [["render", Ve], ["__scopeId", "data-v-4f3e1155"]]), De = {
   id: "media",
   title: "media",
   icon: "",
   align: "center",
-  component: Se
+  component: ke
 };
 export {
-  Ae as default
+  De as default
 };

package/dist/style.css

@@ -1 +1 @@
-.toolbar-wrap[data-v-9eb930f1]{display:flex;align-items:center}.toolbar-wrap .reference-text[data-v-9eb930f1]{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-9eb930f1]:last-child{margin-left:8px}.toolbar-wrap .toolbar-icon-wrap[data-v-9eb930f1]{display:flex;flex-wrap:nowrap;align-items:center;gap:6px}.toolbar-wrap .toolbar-icon-wrap .icon[data-v-9eb930f1]{width:32px;height:32px;display:inline-flex;justify-content:center;align-items:center;border-radius:6px}.toolbar-wrap .toolbar-icon-wrap .icon svg[data-v-9eb930f1]{cursor:pointer;color:var(--ti-lowcode-toolbar-title-color);outline:none;width:22px;height:22px;margin-top:-.5px}.toolbar-wrap .toolbar-icon-wrap .icon.active[data-v-9eb930f1],.toolbar-wrap .toolbar-icon-wrap .icon[data-v-9eb930f1]:hover{background:var(--ti-lowcode-toolbar-view-active-bg)}.toolbar-wrap .toolbar-icon-wrap .icon.active svg[data-v-9eb930f1]{color:var(--ti-lowcode-common-primary-color)}.toolbar-wrap .more-setting .setting-item[data-v-9eb930f1]{display:flex;justify-content:space-between;padding:12px}
+.toolbar-wrap[data-v-4f3e1155]{display:flex;align-items:center}.toolbar-wrap .reference-text[data-v-4f3e1155]{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-4f3e1155]:last-child{margin-left:8px}.toolbar-wrap .toolbar-icon-wrap[data-v-4f3e1155]{display:flex;flex-wrap:nowrap;align-items:center;gap:6px}.toolbar-wrap .toolbar-icon-wrap .icon[data-v-4f3e1155]{width:32px;height:32px;display:inline-flex;justify-content:center;align-items:center;border-radius:6px}.toolbar-wrap .toolbar-icon-wrap .icon svg[data-v-4f3e1155]{cursor:pointer;color:var(--ti-lowcode-toolbar-title-color);outline:none;width:22px;height:22px;margin-top:-.5px}.toolbar-wrap .toolbar-icon-wrap .icon.active[data-v-4f3e1155],.toolbar-wrap .toolbar-icon-wrap .icon[data-v-4f3e1155]:hover{background:var(--ti-lowcode-toolbar-view-active-bg)}.toolbar-wrap .toolbar-icon-wrap .icon.active svg[data-v-4f3e1155]{color:var(--ti-lowcode-common-primary-color)}.toolbar-wrap .more-setting .setting-item[data-v-4f3e1155]{display:flex;justify-content:space-between;padding:12px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-media",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "publishConfig": {
     "access": "public"
   },
@@ -24,18 +24,18 @@
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
-    "@opentiny/tiny-engine-canvas": "1.0.3",
-    "@opentiny/tiny-engine-controller": "1.0.3",
-    "@opentiny/vue": "~3.10.0",
-    "@opentiny/vue-icon": "~3.10.0"
+    "@opentiny/tiny-engine-canvas": "1.0.4",
+    "@opentiny/tiny-engine-controller": "1.0.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
     "vite": "^4.3.7"
   },
   "peerDependencies": {
+    "@opentiny/vue": "^3.14.0",
+    "@opentiny/vue-icon": "^3.14.0",
     "vue": "^3.4.15"
   },
-  "gitHead": "9a6cce3988accb39c97a9a21169c022c65a8e27f"
+  "gitHead": "aa79110d52c3e77f6e664c22983c93bd74d9406d"
 }