@opentiny/tiny-engine-toolbar-media 2.0.0 → 2.1.0

package/dist/index.js

@@ -1,17 +1,17 @@
 import "./style.css";
-import { ref as k, computed as B, reactive as Q, toRaw as Y, watch as E, watchEffect as Z, onMounted as $, onUnmounted as ee, resolveComponent as g, openBlock as x, createBlock as T, withCtx as c, createElementVNode as t, createElementBlock as W, Fragment as te, renderList as ne, normalizeClass as oe, createVNode as w, toDisplayString as r, createTextVNode as I, createCommentVNode as P } from "vue";
-import { Popover as ie, Input as ae, Switch as le } from "@opentiny/vue";
-import { IconWebPlus as D } from "@opentiny/vue-icon";
-import { useLayout as _, useCanvas as F } from "@opentiny/tiny-engine-meta-register";
+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 = (b, n) => {
-  const d = b.__vccOpts || b;
-  for (const [o, p] of n)
-    d[o] = p;
+const de = (h, n) => {
+  const d = h.__vccOpts || h;
+  for (const [i, p] of n)
+    d[i] = p;
   return d;
 }, re = {
   components: {
-    TinyPopover: ie,
+    TinyPopover: oe,
     TinyInput: ae,
     TinySwitch: le,
     ToolbarBase: se
@@ -30,9 +30,9 @@ const de = (b, n) => {
       default: () => ({})
     }
   },
-  setup(b, { emit: n }) {
-    let d = null, o = "", p = "";
-    const { layoutState: y } = _(), u = k(!1), m = k(!1), v = k(!1), { getCanvasType: f } = F().canvasApi.value, C = k((f == null ? void 0 : f()) === "absolute"), i = B(() => _().getDimension()), h = B(() => i.value.scale * 100), a = Q({
+  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 de = (b, n) => {
         title: "添加大断点",
         list: [
           {
-            icon: D(),
+            icon: N(),
             text: "1280px"
           },
           {
-            icon: D(),
+            icon: N(),
             text: "1440px"
           },
           {
-            icon: D(),
+            icon: N(),
             text: "1920px"
           }
         ],
@@ -93,8 +93,8 @@ const de = (b, n) => {
           maxWidth: "1920px",
           title: "大屏",
           subTitle: "1200px 及以上",
-          content: "此处添加的样式将适用于 1200 像素及以上，除非它们在更大的断点处进行编辑",
-          enContent: "Style added here will apply at 1200px and up,unless they′re edited at a larger breakpoint"
+          content: "此处添加的样式将适用于 1200 像素及以上，除非它们在更大的断点处进行编辑。",
+          enContent: "Style added here will apply at 1200px and up,unless they′re edited at a larger breakpoint."
         },
         {
           idx: 1,
@@ -150,232 +150,219 @@ const de = (b, n) => {
         }
       ]
     }), L = () => {
-      m.value = !1;
+      b.value = !1;
     }, O = () => {
       d = setTimeout(() => {
         u.value = !0;
       }, 1e3);
     }, U = () => {
       u.value = !1, clearTimeout(d);
-    }, X = () => {
-      y.toolbars.visiblePopover = !0, v.value = !0;
     }, j = () => {
-      y.toolbars.visiblePopover = !1, v.value = !1;
-    }, N = (e) => {
+      w.toolbars.visiblePopover = !0, m.value = !0;
+    }, q = () => {
+      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 && (y.toolbars.visiblePopover = !1);
-    }, V = a.media.reduce((e, l, s) => (e[l.view] = { ...Y(l), index: s }, e), {}), S = (e) => {
-      b.isCanvas ? _().setDimension({
+      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
       }) : (a.activeIndex = e.idx, n("setViewPort", e.width));
-    }, q = (e, l) => {
-      const s = V[l];
-      _().setDimension({
+    }, z = (e, l) => {
+      const s = k[l];
+      V().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) => {
+    ], 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 = o || parseInt(i.value.width, 10);
-      const s = Number(a.width), K = ((M = z.find((A) => A.min <= s && s <= A.max)) == null ? void 0 : M.type) || "desktop";
-      q(s, K);
-    }, G = (e) => {
-      const l = V.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), _().setDimension({
+      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
       });
-    }, H = (e) => {
+    }, J = (e) => {
       const { setCanvasType: l } = F().canvasApi.value;
       l(e ? "absolute" : "normal");
     };
     E(
-      () => i.value.deviceType,
+      () => o.value.deviceType,
       (e) => {
-        a.activeIndex = V[e].index, a.readonly = e !== "mdx";
+        a.activeIndex = k[e].index, a.readonly = e !== "mdx";
       },
       { immediate: !0 }
     ), Z(() => {
-      a.scaleValue = h.value.toFixed(2), p = h.value;
+      a.scaleValue = x.value.toFixed(2), p = x.value;
     }), E(
-      () => i.value.width,
+      () => o.value.width,
       (e) => {
         const l = parseInt(e, 10);
-        Number.isInteger(l) && (a.width = l, o = l);
+        Number.isInteger(l) && (a.width = l, i = l);
       }
     ), $(() => {
-      document.addEventListener("click", N);
+      document.addEventListener("click", P);
     }), ee(() => {
-      document.removeEventListener("click", N);
+      document.removeEventListener("click", P);
     });
-    const J = i.value.deviceType || "desktop";
-    return S(V[J]), {
-      scale: h,
+    const K = o.value.deviceType || "desktop";
+    return S(k[K]), {
+      scale: x,
       state: a,
-      active: m,
-      flag: v,
+      active: b,
+      flag: m,
       hide: L,
-      layoutState: y,
+      layoutState: w,
       visible: u,
       showTips: O,
       hideTips: U,
       timer: d,
-      dimension: i,
+      dimension: o,
       setViewPort: S,
-      showPopover: X,
-      hidePopover: j,
-      widthChange: R,
-      scaleChange: G,
+      showPopover: j,
+      hidePopover: q,
+      widthChange: G,
+      scaleChange: H,
       isAbsolute: C,
-      changeCanvasType: H
+      changeCanvasType: J
     };
   }
-}, ce = { class: "toolbar-wrap" }, pe = { class: "toolbar-icon-wrap" }, ue = ["onClick"], me = { class: "media-content" }, ve = { class: "media-title" }, he = {
+}, 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"
-}, xe = { class: "content" }, we = { class: "reference-text" }, be = { class: "content-wrap text-content" }, ye = { class: "title text-title" }, fe = { class: "setting" }, ge = { for: "" }, _e = { for: "" }, Ve = { class: "more-setting" };
-function ke(b, n, d, o, p, y) {
-  const u = g("svg-icon"), m = g("tiny-popover"), v = g("tiny-input"), f = g("tiny-switch"), C = g("toolbar-base");
-  return x(), T(C, { options: d.options }, {
+}, he = { class: "content" }, we = {
+  class: "reference-text",
+  title: "画布设置"
+}, 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, [
-          (x(!0), W(te, null, ne(o.state.media, (i, h) => (x(), W("span", {
-            key: h,
-            class: oe(["icon", { active: o.state.activeIndex === h, "is-rotate": i.view === "lanMobile" }]),
-            onClick: (a) => o.setViewPort(i)
+          (v(!0), W(te, null, ne(i.state.media, (o, x) => (v(), W("span", {
+            key: x,
+            class: ie(["icon", { active: i.state.activeIndex === x, "is-rotate": o.view === "lanMobile" }]),
+            onClick: (a) => i.setViewPort(o)
           }, [
-            w(m, {
+            g(b, {
               trigger: "hover",
-              width: "225",
+              width: "260",
               "append-to-body": "",
               "open-delay": 1e3,
               "popper-class": "media-icon-popover"
             }, {
               reference: c(() => [
-                w(u, {
-                  name: i.liked,
+                g(u, {
+                  name: o.liked,
                   class: "media-icon"
                 }, null, 8, ["name"])
               ]),
               default: c(() => [
                 t("div", me, [
-                  t("div", ve, [
-                    t("div", null, r(i.title), 1),
-                    i.subTitle ? (x(), W("div", he, [
-                      n[3] || (n[3] = I(" （")),
-                      i.view === "desktop" ? (x(), T(u, {
-                        key: 0,
-                        name: "stars"
-                      })) : P("", !0),
-                      n[4] || (n[4] = I()),
-                      t("span", null, r(i.subTitle), 1),
-                      n[5] || (n[5] = I("） "))
-                    ])) : P("", !0)
+                  t("div", xe, [
+                    t("div", null, [
+                      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"
+                        })) : D("", !0),
+                        t("span", null, r(o.subTitle), 1),
+                        n[4] || (n[4] = I("） "))
+                      ])) : D("", !0)
+                    ])
                   ]),
-                  t("div", xe, r(i.content), 1)
+                  t("div", he, r(o.content), 1)
                 ])
               ]),
               _: 2
             }, 1024)
           ], 10, ue))), 128))
         ]),
-        d.isCanvas ? (x(), T(m, {
+        d.isCanvas ? (v(), T(b, {
           key: 0,
-          width: "290",
+          width: "200",
           trigger: "click",
           "popper-class": "toolbar-media-popper"
         }, {
           reference: c(() => [
-            w(m, {
-              trigger: "hover",
-              "open-delay": 1e3,
-              "popper-class": "toolbar-right-popover",
-              "append-to-body": "",
-              content: "画布设置"
-            }, {
-              reference: c(() => [
-                t("span", we, [
-                  t("span", null, [
-                    t("span", null, r(parseInt(o.state.width)), 1),
-                    n[6] || (n[6] = t("span", { class: "symbol" }, "PX", -1))
-                  ]),
-                  t("span", null, [
-                    t("span", null, r(o.scale.toFixed(2)), 1),
-                    n[7] || (n[7] = t("span", { class: "symbol" }, "%", -1))
-                  ])
-                ])
+            t("span", we, [
+              t("span", null, [
+                t("span", null, r(parseInt(i.state.width)), 1),
+                n[5] || (n[5] = t("span", { class: "symbol" }, "px", -1))
               ]),
-              _: 1
-            })
+              t("span", null, [
+                t("span", null, r(i.scale.toFixed(2)), 1),
+                n[6] || (n[6] = t("span", { class: "symbol" }, "%", -1))
+              ])
+            ])
           ]),
           default: c(() => [
             t("div", be, [
-              t("span", ye, r(o.state.textData.title), 1),
+              t("div", ye, r(i.state.textData.title), 1),
               t("div", fe, [
                 t("div", null, [
-                  t("label", ge, r(o.state.textData.width), 1),
-                  w(v, {
-                    modelValue: o.state.width,
-                    "onUpdate:modelValue": n[0] || (n[0] = (i) => o.state.width = i),
-                    onChange: o.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: c(() => n[8] || (n[8] = [
-                      t("span", null, "PX", -1)
+                    suffix: c(() => n[7] || (n[7] = [
+                      t("span", null, "px", -1)
                     ])),
                     _: 1
                   }, 8, ["modelValue", "onChange"])
                 ]),
                 t("div", null, [
-                  t("label", _e, r(o.state.textData.scale), 1),
-                  w(v, {
-                    modelValue: o.state.scaleValue,
-                    "onUpdate:modelValue": n[1] || (n[1] = (i) => o.state.scaleValue = i),
-                    readonly: o.state.readonly,
-                    onChange: o.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: c(() => n[9] || (n[9] = [
+                    suffix: c(() => n[8] || (n[8] = [
                       t("span", null, "%", -1)
                     ])),
                     _: 1
                   }, 8, ["modelValue", "readonly", "onChange"])
-                ])
-              ]),
-              t("ul", Ve, [
-                t("li", null, [
-                  n[10] || (n[10] = t("div", null, [
-                    t("span", null, r("自由布局"))
-                  ], -1)),
-                  t("div", null, [
-                    w(f, {
-                      modelValue: o.isAbsolute,
-                      "onUpdate:modelValue": n[2] || (n[2] = (i) => o.isAbsolute = i),
-                      onChange: o.changeCanvasType
-                    }, null, 8, ["modelValue", "onChange"])
-                  ])
+                ]),
+                t("div", null, [
+                  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
-        })) : P("", !0)
+        })) : D("", !0)
       ])
     ]),
     _: 1
   }, 8, ["options"]);
 }
-const Ce = /* @__PURE__ */ de(re, [["render", ke], ["__scopeId", "data-v-40ac19cc"]]), Te = {
+const Ve = /* @__PURE__ */ de(re, [["render", ge], ["__scopeId", "data-v-4a9898e3"]]), ke = {
   id: "engine.toolbars.media",
   type: "toolbars",
   title: "media",
@@ -385,10 +372,10 @@ const Ce = /* @__PURE__ */ de(re, [["render", ke], ["__scopeId", "data-v-40ac19c
     },
     renderType: "slot"
   }
-}, Me = {
-  ...Te,
-  entry: Ce
+}, Ne = {
+  ...ke,
+  entry: Ve
 };
 export {
-  Me as default
+  Ne as default
 };

package/dist/style.css

@@ -1 +1 @@
-.toolbar-wrap[data-v-40ac19cc]{display:flex;align-items:center}.toolbar-wrap .reference-text[data-v-40ac19cc]{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-40ac19cc]:last-child{margin-left:8px}.toolbar-wrap .toolbar-icon-wrap[data-v-40ac19cc]{display:flex;flex-wrap:nowrap;align-items:center;gap:6px}.toolbar-wrap .toolbar-icon-wrap .icon[data-v-40ac19cc]{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-40ac19cc]{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-40ac19cc],.toolbar-wrap .toolbar-icon-wrap .icon[data-v-40ac19cc]:hover{background:var(--ti-lowcode-toolbar-view-active-bg)}.toolbar-wrap .toolbar-icon-wrap .icon.active svg[data-v-40ac19cc]{color:var(--ti-lowcode-common-primary-color)}.toolbar-wrap .more-setting .setting-item[data-v-40ac19cc]{display:flex;justify-content:space-between;padding:12px}
+.toolbar-wrap[data-v-4a9898e3]{display:flex;align-items:center}.toolbar-wrap .reference-text[data-v-4a9898e3]{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-4a9898e3]:last-child{margin-left:8px}.toolbar-wrap .toolbar-icon-wrap[data-v-4a9898e3]{display:flex;flex-wrap:nowrap;align-items:center;gap:6px}.toolbar-wrap .toolbar-icon-wrap .icon[data-v-4a9898e3]{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-4a9898e3]{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-4a9898e3],.toolbar-wrap .toolbar-icon-wrap .icon[data-v-4a9898e3]:hover{background:var(--ti-lowcode-toolbar-view-active-bg)}.toolbar-wrap .toolbar-icon-wrap .icon.active svg[data-v-4a9898e3]{color:var(--ti-lowcode-common-primary-color)}.toolbar-wrap .more-setting .setting-item[data-v-4a9898e3]{display:flex;justify-content:space-between;padding:12px}.media-content[data-v-4a9898e3]{padding:12px 8px;line-height:18px}.media-content .media-title[data-v-4a9898e3]{font-weight:600}.media-content .content[data-v-4a9898e3]{color:var(--te-common-text-secondary)}.setting-content[data-v-4a9898e3]{padding:12px 8px}.content-wrap[data-v-4a9898e3]{padding:20px 12px}.content-wrap .title[data-v-4a9898e3]{font-weight:600;margin-bottom:16px}.content-wrap .setting[data-v-4a9898e3]{display:flex;flex-direction:column;gap:12px}.content-wrap .setting div[data-v-4a9898e3]{display:flex;align-items:center;justify-content:space-between}.content-wrap .setting div label[data-v-4a9898e3]{color:var(--te-common-text-secondary);min-width:64px}.content-wrap .setting div[data-v-4a9898e3]:last-child{justify-content:flex-start}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-media",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -25,11 +25,11 @@
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
-    "@opentiny/tiny-engine-common": "2.0.0",
-    "@opentiny/tiny-engine-meta-register": "2.0.0"
+    "@opentiny/tiny-engine-common": "2.1.0",
+    "@opentiny/tiny-engine-meta-register": "2.1.0"
   },
   "devDependencies": {
-    "@opentiny/tiny-engine-vite-plugin-meta-comments": "2.0.0",
+    "@opentiny/tiny-engine-vite-plugin-meta-comments": "2.1.0",
     "@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": "26b32b2236bb85d8113158fd1475884aa99a9657"
+  "gitHead": "faf3072c75ea5024689972e2a687916e084c156f"
 }