@opentiny/tiny-engine-toolbar-media 2.3.1 → 2.4.0

package/dist/index.js

@@ -1,15 +1,10 @@
 import "./style.css";
-import { resolveComponent as f, createBlock as T, openBlock as v, withCtx as c, createElementVNode as t, createCommentVNode as W, createElementBlock as I, Fragment as X, renderList as Y, normalizeClass as Z, createVNode as g, createTextVNode as D, toDisplayString as r, ref as _, computed as B, reactive as $, toRaw as ee, watch as E, watchEffect as te, onMounted as ne, onUnmounted as ie } from "vue";
+import { ref as _, computed as B, reactive as X, toRaw as Y, watch as M, watchEffect as Z, onMounted as $, onUnmounted as ee, resolveComponent as f, createBlock as T, openBlock as v, withCtx as c, createElementVNode as t, createCommentVNode as W, createElementBlock as I, Fragment as te, renderList as ne, normalizeClass as ie, createVNode as g, createTextVNode as D, toDisplayString as r } from "vue";
 import { Switch as oe, Input as ae, Popover 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 { useLayout as V, useCanvas as A } 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 = {
+const de = {
   components: {
     TinyPopover: le,
     TinyInput: ae,
@@ -32,7 +27,7 @@ const de = (h, n) => {
   },
   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 = $({
+    const { layoutState: w } = V(), u = _(!1), b = _(!1), m = _(!1), { getCanvasType: y } = A().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: "",
@@ -164,7 +159,7 @@ const de = (h, n) => {
     }, 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] = { ...ee(l), index: s }, e), {}), S = (e) => {
+    }, k = a.media.reduce((e, l, s) => (e[l.view] = { ...Y(l), index: s }, e), {}), E = (e) => {
       h.isCanvas ? V().setDimension({
         deviceType: e.view,
         width: e.width,
@@ -186,10 +181,10 @@ const de = (h, n) => {
       { type: "desktop", min: 992, max: 1200 },
       { type: "mdx", min: 1200, max: 1920 }
     ], G = (e) => {
-      var M;
+      var F;
       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";
+      const s = Number(a.width), Q = ((F = R.find((S) => S.min <= s && s <= S.max)) == null ? void 0 : F.type) || "desktop";
       z(s, Q);
     }, H = (e) => {
       const l = k.mdx, s = /^\d+(\.\d+)?$/;
@@ -197,30 +192,30 @@ const de = (h, n) => {
         scale: Number(a.scaleValue) / 100
       });
     }, J = (e) => {
-      const { setCanvasType: l } = F().canvasApi.value;
+      const { setCanvasType: l } = A().canvasApi.value;
       l(e ? "absolute" : "normal");
     };
-    E(
+    M(
       () => o.value.deviceType,
       (e) => {
         a.activeIndex = k[e].index, a.readonly = e !== "mdx";
       },
       { immediate: !0 }
-    ), te(() => {
+    ), Z(() => {
       a.scaleValue = x.value.toFixed(2), p = x.value;
-    }), E(
+    }), M(
       () => o.value.width,
       (e) => {
         const l = parseInt(e, 10);
         Number.isInteger(l) && (a.width = l, i = l);
       }
-    ), ne(() => {
+    ), $(() => {
       document.addEventListener("click", P);
-    }), ie(() => {
+    }), ee(() => {
       document.removeEventListener("click", P);
     });
     const K = o.value.deviceType || "desktop";
-    return S(k[K]), {
+    return E(k[K]), {
       scale: x,
       state: a,
       active: b,
@@ -232,7 +227,7 @@ const de = (h, n) => {
       hideTips: U,
       timer: d,
       dimension: o,
-      setViewPort: S,
+      setViewPort: E,
       showPopover: j,
       hidePopover: q,
       widthChange: G,
@@ -241,6 +236,11 @@ const de = (h, n) => {
       changeCanvasType: J
     };
   }
+}, re = (h, n) => {
+  const d = h.__vccOpts || h;
+  for (const [i, p] of n)
+    d[i] = p;
+  return d;
 }, 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"
@@ -254,9 +254,9 @@ function ge(h, n, d, i, p, w) {
     default: c(() => [
       t("div", ce, [
         t("div", pe, [
-          (v(!0), I(X, null, Y(i.state.media, (o, x) => (v(), I("span", {
+          (v(!0), I(te, null, ne(i.state.media, (o, x) => (v(), I("span", {
             key: x,
-            class: Z(["icon", { active: i.state.activeIndex === x, "is-rotate": o.view === "lanMobile" }]),
+            class: ie(["icon", { active: i.state.activeIndex === x, "is-rotate": o.view === "lanMobile" }]),
             onClick: (a) => i.setViewPort(o)
           }, [
             g(b, {
@@ -362,7 +362,7 @@ function ge(h, n, d, i, p, w) {
     _: 1
   }, 8, ["options"]);
 }
-const Ve = /* @__PURE__ */ de(re, [["render", ge], ["__scopeId", "data-v-d5d5a44d"]]), ke = {
+const Ve = /* @__PURE__ */ re(de, [["render", ge], ["__scopeId", "data-v-9173161d"]]), ke = {
   id: "engine.toolbars.media",
   type: "toolbars",
   title: "media",

package/dist/style.css

@@ -1 +1 @@
-.toolbar-wrap[data-v-d5d5a44d]{display:flex;align-items:center}.toolbar-wrap .reference-text[data-v-d5d5a44d]{cursor:pointer;height:var(--base-top-panel-height);line-height:var(--base-top-panel-height);padding:0 7px;color:var(--te-toolbars-media-text-color-secondary);display:inline-block}.toolbar-wrap .reference-text>span[data-v-d5d5a44d]:last-child{margin-left:8px}.toolbar-wrap .toolbar-icon-wrap[data-v-d5d5a44d]{display:flex;flex-wrap:nowrap;align-items:center;gap:6px}.toolbar-wrap .toolbar-icon-wrap .icon[data-v-d5d5a44d]{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-d5d5a44d]{cursor:pointer;color:var(--te-toolbars-media-text-color-primary);outline:none;width:18px;height:18px;margin-top:-.5px}.toolbar-wrap .toolbar-icon-wrap .icon.active[data-v-d5d5a44d],.toolbar-wrap .toolbar-icon-wrap .icon[data-v-d5d5a44d]:hover{background:var(--te-toolbars-media-bg-color-active)}.toolbar-wrap .toolbar-icon-wrap .icon.active svg[data-v-d5d5a44d]{color:var(--te-toolbars-media-text-color-checked)}.toolbar-wrap .more-setting .setting-item[data-v-d5d5a44d]{display:flex;justify-content:space-between;padding:12px}.media-content[data-v-d5d5a44d]{line-height:18px}.media-content .media-title[data-v-d5d5a44d]{font-weight:600}.media-content .content[data-v-d5d5a44d]{color:var(--te-toolbars-media-text-color-secondary)}.setting-content[data-v-d5d5a44d]{padding:12px 8px}.content-wrap .title[data-v-d5d5a44d]{font-weight:600;margin-bottom:16px}.content-wrap .setting[data-v-d5d5a44d]{display:flex;flex-direction:column;gap:12px}.content-wrap .setting div[data-v-d5d5a44d]{display:flex;align-items:center;justify-content:space-between}.content-wrap .setting div label[data-v-d5d5a44d]{color:var(--te-toolbars-media-text-color-secondary);min-width:64px}.content-wrap .setting div[data-v-d5d5a44d]:last-child{justify-content:flex-start}:root{--te-toolbars-media-text-color-secondary: var(--te-common-text-secondary);--te-toolbars-media-text-color-primary: var(--te-common-text-primary);--te-toolbars-media-text-color-checked: var(--te-common-text-checked);--te-toolbars-media-bg-color-active: var(--te-common-bg-prompt)}
+.toolbar-wrap[data-v-9173161d]{display:flex;align-items:center}.toolbar-wrap .reference-text[data-v-9173161d]{cursor:pointer;height:var(--base-top-panel-height);line-height:var(--base-top-panel-height);padding:0 7px;color:var(--te-toolbars-media-text-color-secondary);display:inline-block}.toolbar-wrap .reference-text>span[data-v-9173161d]:last-child{margin-left:8px}.toolbar-wrap .toolbar-icon-wrap[data-v-9173161d]{display:flex;flex-wrap:nowrap;align-items:center;gap:6px}.toolbar-wrap .toolbar-icon-wrap .icon[data-v-9173161d]{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-9173161d]{cursor:pointer;color:var(--te-toolbars-media-text-color-primary);outline:none;width:18px;height:18px;margin-top:-.5px}.toolbar-wrap .toolbar-icon-wrap .icon.active[data-v-9173161d],.toolbar-wrap .toolbar-icon-wrap .icon[data-v-9173161d]:hover{background:var(--te-toolbars-media-bg-color-active)}.toolbar-wrap .toolbar-icon-wrap .icon.active svg[data-v-9173161d]{color:var(--te-toolbars-media-text-color-checked)}.toolbar-wrap .more-setting .setting-item[data-v-9173161d]{display:flex;justify-content:space-between;padding:12px}.media-content[data-v-9173161d]{line-height:18px}.media-content .media-title[data-v-9173161d]{font-weight:600}.media-content .content[data-v-9173161d]{color:var(--te-toolbars-media-text-color-secondary)}.setting-content[data-v-9173161d]{padding:12px 8px}.content-wrap .title[data-v-9173161d]{font-weight:600;margin-bottom:16px}.content-wrap .setting[data-v-9173161d]{display:flex;flex-direction:column;gap:12px}.content-wrap .setting div[data-v-9173161d]{display:flex;align-items:center;justify-content:space-between}.content-wrap .setting div label[data-v-9173161d]{color:var(--te-toolbars-media-text-color-secondary);min-width:64px}.content-wrap .setting div[data-v-9173161d]:last-child{justify-content:flex-start}:root{--te-toolbars-media-text-color-secondary: var(--te-common-text-secondary);--te-toolbars-media-text-color-primary: var(--te-common-text-primary);--te-toolbars-media-text-color-checked: var(--te-common-text-checked);--te-toolbars-media-bg-color-active: var(--te-common-bg-prompt)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-toolbar-media",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "publishConfig": {
     "access": "public"
   },
@@ -25,11 +25,11 @@
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
-    "@opentiny/tiny-engine-common": "2.3.1",
-    "@opentiny/tiny-engine-meta-register": "2.3.0"
+    "@opentiny/tiny-engine-common": "2.4.0",
+    "@opentiny/tiny-engine-meta-register": "2.4.0"
   },
   "devDependencies": {
-    "@opentiny/tiny-engine-vite-plugin-meta-comments": "2.3.0",
+    "@opentiny/tiny-engine-vite-plugin-meta-comments": "2.4.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.20.0",
     "vue": "^3.4.15"
   },
-  "gitHead": "9eb2dbacfdb9fd9648b66621d6340ac502efd4b3"
+  "gitHead": "477aa411da11a4f95712e3e5c251d97cae23f4ad"
 }