@opentiny/tiny-engine-toolbar-media 2.6.0 → 2.7.0-alpha.0

package/dist/index.js

@@ -1,15 +1,25 @@
 import "./style.css";
-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, 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 { ToolbarBase as se } from "@opentiny/tiny-engine-common";
-const de = {
+import { useLayout as h, useCanvas as _, callEntry as V, useCompile as X } from "@opentiny/tiny-engine-meta-register";
+import { ref as q, computed as Y, reactive as ee, toRaw as te, watch as Z, watchEffect as ae, onMounted as ne, onUnmounted as ie, resolveComponent as O, createBlock as z, openBlock as L, withCtx as F, createElementVNode as o, createCommentVNode as R, createElementBlock as G, Fragment as oe, renderList as le, normalizeClass as se, createVNode as j, createTextVNode as H, toDisplayString as B } from "vue";
+import { Switch as de, Input as ce, Popover as re } from "@opentiny/vue";
+import { IconWebPlus as y } from "@opentiny/vue-icon";
+import { ToolbarBase as U } from "@opentiny/tiny-engine-common";
+const J = {
+  id: "engine.toolbars.media",
+  type: "toolbars",
+  title: "media",
+  options: {
+    icon: {
+      default: ""
+    },
+    renderType: "slot"
+  }
+}, me = {
   components: {
-    TinyPopover: le,
-    TinyInput: ae,
-    TinySwitch: oe,
-    ToolbarBase: se
+    TinyPopover: re,
+    TinyInput: ce,
+    TinySwitch: de,
+    ToolbarBase: U
   },
   props: {
     data: {
@@ -25,9 +35,15 @@ const de = {
       default: () => ({})
     }
   },
-  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({
+  setup(m, {
+    emit: e
+  }) {
+    let l = null, t = "", s = "";
+    const {
+      layoutState: p
+    } = h(), d = q(!1), u = q(!1), c = q(!1), {
+      getCanvasType: x
+    } = _().canvasApi.value, w = q((x == null ? void 0 : x()) === "absolute"), a = Y(() => h().getDimension()), r = Y(() => a.value.scale * 100), n = ee({
       activeIndex: 0,
       guideValue: "",
       width: "",
@@ -36,345 +52,909 @@ const de = {
       viewWidth: null,
       moreData: {
         title: "添加大断点",
-        list: [
-          {
-            icon: N(),
-            text: "1280px"
-          },
-          {
-            icon: N(),
-            text: "1440px"
-          },
-          {
-            icon: N(),
-            text: "1920px"
-          }
-        ],
+        list: [{
+          icon: y(),
+          text: "1280px"
+        }, {
+          icon: y(),
+          text: "1440px"
+        }, {
+          icon: y(),
+          text: "1920px"
+        }],
         tips: "将鼠标悬停在断点上以了解更多信息"
       },
       textData: {
         title: "画布设置",
         width: "宽度",
         scale: "缩放",
-        list: [
-          {
-            text: "自由布局"
-          }
-        ],
+        list: [{
+          text: "自由布局"
+        }],
         vision: "视觉预览"
       },
-      guideOptions: [
-        {
-          value: "选项1",
-          label: "No guide"
-        },
-        {
-          value: "选项2",
-          label: "Line guide(960px)"
-        },
-        {
-          value: "选项3",
-          label: "Filled guide(960px)"
-        }
-      ],
-      media: [
-        {
-          idx: 0,
-          view: "mdx",
-          icon: "IconDesktopView",
-          liked: "desktop-large",
-          width: "1920px",
-          minWidth: "1200px",
-          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."
-        },
-        {
-          idx: 1,
-          view: "desktop",
-          icon: "IconDesktopView",
-          liked: "laptop-cut-corner",
-          width: "1200px",
-          minWidth: "992px",
-          maxWidth: "1200px",
-          title: "PC 端",
-          subTitle: "基本断点",
-          content: "桌面端样式适用于所有断点，除非它们在更大或更小的断点处进行编辑，在这里开始你的布局。",
-          enContent: "Desktop styles apply at all breakpoints,unless they′re edited at a larger or smaller breakpoints. Start your stying here."
-        },
-        {
-          idx: 2,
-          view: "tablet",
-          icon: "IconTabletView",
-          liked: "tablet-portrait",
-          width: "992px",
-          minWidth: "768px",
-          maxWidth: "992px",
-          title: "平板",
-          subTitle: "992px 及以下",
-          content: "此处添加的样式将适用于 992 像素及以下，除非它们在较小的断点处进行编辑。",
-          enContent: "styles added here will apply at 992px and down,unless they′re edited at smaller breakpoints."
-        },
-        {
-          idx: 3,
-          view: "lanMobile",
-          icon: "IconMobileView",
-          liked: "mobile-landscape",
-          width: "768px",
-          minWidth: "480px",
-          maxWidth: "768px",
-          title: "手机横屏",
-          subTitle: "768px 及以下",
-          content: "此处添加的样式将适用于 768 像素及以下，除非它们在较小的断点处进行编辑。",
-          enContent: "styles added here will apply at 768px and down,unless they′re edited at smaller breakpoints."
-        },
-        {
-          idx: 4,
-          view: "mobile",
-          icon: "IconMobileView",
-          liked: "mobile-portrai",
-          width: "480px",
-          minWidth: "240px",
-          maxWidth: "480px",
-          title: "手机竖屏",
-          subTitle: "480px 及以下",
-          content: "此处添加的样式将适用于 480 像素及以下。",
-          enContent: "styles added here will apply at 480px and down."
-        }
-      ]
-    }), L = () => {
-      b.value = !1;
-    }, O = () => {
-      d = setTimeout(() => {
-        u.value = !0;
+      guideOptions: [{
+        value: "选项1",
+        label: "No guide"
+      }, {
+        value: "选项2",
+        label: "Line guide(960px)"
+      }, {
+        value: "选项3",
+        label: "Filled guide(960px)"
+      }],
+      media: [{
+        idx: 0,
+        view: "mdx",
+        icon: "IconDesktopView",
+        liked: "desktop-large",
+        width: "1920px",
+        minWidth: "1200px",
+        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."
+      }, {
+        idx: 1,
+        view: "desktop",
+        icon: "IconDesktopView",
+        liked: "laptop-cut-corner",
+        width: "1200px",
+        minWidth: "992px",
+        maxWidth: "1200px",
+        title: "PC 端",
+        subTitle: "基本断点",
+        content: "桌面端样式适用于所有断点，除非它们在更大或更小的断点处进行编辑，在这里开始你的布局。",
+        enContent: "Desktop styles apply at all breakpoints,unless they′re edited at a larger or smaller breakpoints. Start your stying here."
+      }, {
+        idx: 2,
+        view: "tablet",
+        icon: "IconTabletView",
+        liked: "tablet-portrait",
+        width: "992px",
+        minWidth: "768px",
+        maxWidth: "992px",
+        title: "平板",
+        subTitle: "992px 及以下",
+        content: "此处添加的样式将适用于 992 像素及以下，除非它们在较小的断点处进行编辑。",
+        enContent: "styles added here will apply at 992px and down,unless they′re edited at smaller breakpoints."
+      }, {
+        idx: 3,
+        view: "lanMobile",
+        icon: "IconMobileView",
+        liked: "mobile-landscape",
+        width: "768px",
+        minWidth: "480px",
+        maxWidth: "768px",
+        title: "手机横屏",
+        subTitle: "768px 及以下",
+        content: "此处添加的样式将适用于 768 像素及以下，除非它们在较小的断点处进行编辑。",
+        enContent: "styles added here will apply at 768px and down,unless they′re edited at smaller breakpoints."
+      }, {
+        idx: 4,
+        view: "mobile",
+        icon: "IconMobileView",
+        liked: "mobile-portrai",
+        width: "480px",
+        minWidth: "240px",
+        maxWidth: "480px",
+        title: "手机竖屏",
+        subTitle: "480px 及以下",
+        content: "此处添加的样式将适用于 480 像素及以下。",
+        enContent: "styles added here will apply at 480px and down."
+      }]
+    }), C = V(() => {
+      u.value = !1;
+    }, {
+      metaData: {
+        id: "engine.toolbars.media.Main.hide"
+      },
+      ctx: () => ({
+        props: m,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: u,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: w,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: C,
+        showTips: k,
+        hideTips: D,
+        showPopover: T,
+        hidePopover: M,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: f,
+        activeView: W,
+        breakpoints: I,
+        widthChange: P,
+        scaleChange: N,
+        changeCanvasType: S,
+        mode: E,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: _,
+        ToolbarBase: U
+      })
+    }), k = V(() => {
+      l = setTimeout(() => {
+        d.value = !0;
       }, 1e3);
-    }, U = () => {
-      u.value = !1, clearTimeout(d);
-    }, j = () => {
-      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 && (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));
-    }, z = (e, l) => {
-      const s = k[l];
-      V().setDimension({
-        deviceType: s.view,
-        width: e ? `${e}px` : s.width,
-        minWidth: s.minWidth,
-        maxWidth: s.maxWidth
+    }, {
+      metaData: {
+        id: "engine.toolbars.media.Main.showTips"
+      },
+      ctx: () => ({
+        props: m,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: u,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: w,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: C,
+        showTips: k,
+        hideTips: D,
+        showPopover: T,
+        hidePopover: M,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: f,
+        activeView: W,
+        breakpoints: I,
+        widthChange: P,
+        scaleChange: N,
+        changeCanvasType: S,
+        mode: E,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: _,
+        ToolbarBase: U
+      })
+    }), D = V(() => {
+      d.value = !1, clearTimeout(l);
+    }, {
+      metaData: {
+        id: "engine.toolbars.media.Main.hideTips"
+      },
+      ctx: () => ({
+        props: m,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: u,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: w,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: C,
+        showTips: k,
+        hideTips: D,
+        showPopover: T,
+        hidePopover: M,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: f,
+        activeView: W,
+        breakpoints: I,
+        widthChange: P,
+        scaleChange: N,
+        changeCanvasType: S,
+        mode: E,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: _,
+        ToolbarBase: U
+      })
+    }), T = V(() => {
+      p.toolbars.visiblePopover = !0, c.value = !0;
+    }, {
+      metaData: {
+        id: "engine.toolbars.media.Main.showPopover"
+      },
+      ctx: () => ({
+        props: m,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: u,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: w,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: C,
+        showTips: k,
+        hideTips: D,
+        showPopover: T,
+        hidePopover: M,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: f,
+        activeView: W,
+        breakpoints: I,
+        widthChange: P,
+        scaleChange: N,
+        changeCanvasType: S,
+        mode: E,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: _,
+        ToolbarBase: U
+      })
+    }), M = V(() => {
+      p.toolbars.visiblePopover = !1, c.value = !1;
+    }, {
+      metaData: {
+        id: "engine.toolbars.media.Main.hidePopover"
+      },
+      ctx: () => ({
+        props: m,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: u,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: w,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: C,
+        showTips: k,
+        hideTips: D,
+        showPopover: T,
+        hidePopover: M,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: f,
+        activeView: W,
+        breakpoints: I,
+        widthChange: P,
+        scaleChange: N,
+        changeCanvasType: S,
+        mode: E,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: _,
+        ToolbarBase: U
+      })
+    }), g = V((i) => {
+      const b = document.querySelector(".reference-text"), A = b == null ? void 0 : b.contains(i.target);
+      b !== i.target && !A && (p.toolbars.visiblePopover = !1);
+    }, {
+      metaData: {
+        id: "engine.toolbars.media.Main.closePopover"
+      },
+      ctx: () => ({
+        props: m,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: u,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: w,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: C,
+        showTips: k,
+        hideTips: D,
+        showPopover: T,
+        hidePopover: M,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: f,
+        activeView: W,
+        breakpoints: I,
+        widthChange: P,
+        scaleChange: N,
+        changeCanvasType: S,
+        mode: E,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: _,
+        ToolbarBase: U
+      })
+    }), v = n.media.reduce((i, b, A) => (i[b.view] = {
+      ...te(b),
+      index: A
+    }, i), {}), f = V((i) => {
+      m.isCanvas ? h().setDimension({
+        deviceType: i.view,
+        width: i.width,
+        minWidth: i.minWidth,
+        maxWidth: i.maxWidth
+      }) : (n.activeIndex = i.idx, e("setViewPort", i.width));
+    }, {
+      metaData: {
+        id: "engine.toolbars.media.Main.setViewPort"
+      },
+      ctx: () => ({
+        props: m,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: u,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: w,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: C,
+        showTips: k,
+        hideTips: D,
+        showPopover: T,
+        hidePopover: M,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: f,
+        activeView: W,
+        breakpoints: I,
+        widthChange: P,
+        scaleChange: N,
+        changeCanvasType: S,
+        mode: E,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: _,
+        ToolbarBase: U
+      })
+    }), W = V((i, b) => {
+      const A = v[b];
+      h().setDimension({
+        deviceType: A.view,
+        width: i ? `${i}px` : A.width,
+        minWidth: A.minWidth,
+        maxWidth: A.maxWidth
       });
-    }, 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 }
-    ], 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
+    }, {
+      metaData: {
+        id: "engine.toolbars.media.Main.activeView"
+      },
+      ctx: () => ({
+        props: m,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: u,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: w,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: C,
+        showTips: k,
+        hideTips: D,
+        showPopover: T,
+        hidePopover: M,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: f,
+        activeView: W,
+        breakpoints: I,
+        widthChange: P,
+        scaleChange: N,
+        changeCanvasType: S,
+        mode: E,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: _,
+        ToolbarBase: U
+      })
+    }), I = [{
+      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
+    }], P = V((i) => {
+      var K;
+      const b = /^\d+$/;
+      String(i).match(b) ? Number(i) < 240 ? n.width = 240 : Number(i) > 1920 ? n.width = 1920 : n.width = i : n.width = t || parseInt(a.value.width, 10);
+      const A = Number(n.width), $ = ((K = I.find((Q) => Q.min <= A && A <= Q.max)) == null ? void 0 : K.type) || "desktop";
+      W(A, $);
+    }, {
+      metaData: {
+        id: "engine.toolbars.media.Main.widthChange"
+      },
+      ctx: () => ({
+        props: m,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: u,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: w,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: C,
+        showTips: k,
+        hideTips: D,
+        showPopover: T,
+        hidePopover: M,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: f,
+        activeView: W,
+        breakpoints: I,
+        widthChange: P,
+        scaleChange: N,
+        changeCanvasType: S,
+        mode: E,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: _,
+        ToolbarBase: U
+      })
+    }), N = V((i) => {
+      const b = v.mdx, A = /^\d+(\.\d+)?$/;
+      String(i).match(A) ? Number(i) > 100 ? n.scaleValue = 100 : Number(i) < 20 ? n.scaleValue = 20 : n.scaleValue = i : n.scaleValue = s || parseInt(b.scale), n.scaleValue = Number(n.scaleValue).toFixed(2), h().setDimension({
+        scale: Number(n.scaleValue) / 100
       });
-    }, J = (e) => {
-      const { setCanvasType: l } = F().canvasApi.value;
-      l(e ? "absolute" : "normal");
-    };
-    E(
-      () => o.value.deviceType,
-      (e) => {
-        a.activeIndex = k[e].index, a.readonly = e !== "mdx";
+    }, {
+      metaData: {
+        id: "engine.toolbars.media.Main.scaleChange"
       },
-      { immediate: !0 }
-    ), Z(() => {
-      a.scaleValue = x.value.toFixed(2), p = x.value;
-    }), E(
-      () => o.value.width,
-      (e) => {
-        const l = parseInt(e, 10);
-        Number.isInteger(l) && (a.width = l, i = l);
-      }
-    ), $(() => {
-      document.addEventListener("click", P);
-    }), ee(() => {
-      document.removeEventListener("click", P);
+      ctx: () => ({
+        props: m,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: u,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: w,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: C,
+        showTips: k,
+        hideTips: D,
+        showPopover: T,
+        hidePopover: M,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: f,
+        activeView: W,
+        breakpoints: I,
+        widthChange: P,
+        scaleChange: N,
+        changeCanvasType: S,
+        mode: E,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: _,
+        ToolbarBase: U
+      })
+    }), S = V((i) => {
+      const {
+        setCanvasType: b
+      } = _().canvasApi.value;
+      b(i ? "absolute" : "normal");
+    }, {
+      metaData: {
+        id: "engine.toolbars.media.Main.changeCanvasType"
+      },
+      ctx: () => ({
+        props: m,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: u,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: w,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: C,
+        showTips: k,
+        hideTips: D,
+        showPopover: T,
+        hidePopover: M,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: f,
+        activeView: W,
+        breakpoints: I,
+        widthChange: P,
+        scaleChange: N,
+        changeCanvasType: S,
+        mode: E,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: _,
+        ToolbarBase: U
+      })
     });
-    const K = o.value.deviceType || "desktop";
-    return S(k[K]), {
-      scale: x,
-      state: a,
-      active: b,
-      flag: m,
-      hide: L,
-      layoutState: w,
-      visible: u,
-      showTips: O,
-      hideTips: U,
-      timer: d,
-      dimension: o,
-      setViewPort: S,
-      showPopover: j,
-      hidePopover: q,
-      widthChange: G,
-      scaleChange: H,
-      isAbsolute: C,
-      changeCanvasType: J
+    Z(() => a.value.deviceType, (i) => {
+      n.activeIndex = v[i].index, n.readonly = i !== "mdx";
+    }, {
+      immediate: !0
+    }), ae(() => {
+      n.scaleValue = r.value.toFixed(2), s = r.value;
+    }), Z(() => a.value.width, (i) => {
+      const b = parseInt(i, 10);
+      Number.isInteger(b) && (n.width = b, t = b);
+    }), ne(V(V(() => {
+      document.addEventListener("click", g);
+    }, {
+      metaData: {
+        id: "engine.toolbars.media.Main.onMounted[0]"
+      },
+      ctx: () => ({
+        props: m,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: u,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: w,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: C,
+        showTips: k,
+        hideTips: D,
+        showPopover: T,
+        hidePopover: M,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: f,
+        activeView: W,
+        breakpoints: I,
+        widthChange: P,
+        scaleChange: N,
+        changeCanvasType: S,
+        mode: E,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: _,
+        ToolbarBase: U
+      })
+    }), {
+      metaData: {
+        id: "engine.toolbars.media.Main.onMounted[0]"
+      },
+      ctx: () => ({
+        props: m,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: u,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: w,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: C,
+        showTips: k,
+        hideTips: D,
+        showPopover: T,
+        hidePopover: M,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: f,
+        activeView: W,
+        breakpoints: I,
+        widthChange: P,
+        scaleChange: N,
+        changeCanvasType: S,
+        mode: E,
+        _callEntry: V,
+        _useCompile: X,
+        _metaData: J,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: _,
+        ToolbarBase: U
+      })
+    })), ie(V(V(() => {
+      document.removeEventListener("click", g);
+    }, {
+      metaData: {
+        id: "engine.toolbars.media.Main.onUnmounted[0]"
+      },
+      ctx: () => ({
+        props: m,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: u,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: w,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: C,
+        showTips: k,
+        hideTips: D,
+        showPopover: T,
+        hidePopover: M,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: f,
+        activeView: W,
+        breakpoints: I,
+        widthChange: P,
+        scaleChange: N,
+        changeCanvasType: S,
+        mode: E,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: _,
+        ToolbarBase: U
+      })
+    }), {
+      metaData: {
+        id: "engine.toolbars.media.Main.onUnmounted[0]"
+      },
+      ctx: () => ({
+        props: m,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: u,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: w,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: C,
+        showTips: k,
+        hideTips: D,
+        showPopover: T,
+        hidePopover: M,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: f,
+        activeView: W,
+        breakpoints: I,
+        widthChange: P,
+        scaleChange: N,
+        changeCanvasType: S,
+        mode: E,
+        _callEntry: V,
+        _useCompile: X,
+        _metaData: J,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: _,
+        ToolbarBase: U
+      })
+    }));
+    const E = a.value.deviceType || "desktop";
+    return f(v[E]), {
+      scale: r,
+      state: n,
+      active: u,
+      flag: c,
+      hide: C,
+      layoutState: p,
+      visible: d,
+      showTips: k,
+      hideTips: D,
+      timer: l,
+      dimension: a,
+      setViewPort: f,
+      showPopover: T,
+      hidePopover: M,
+      widthChange: P,
+      scaleChange: N,
+      isAbsolute: w,
+      changeCanvasType: S
     };
   }
-}, 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 = {
+}, pe = (m, e) => {
+  const l = m.__vccOpts || m;
+  for (const [t, s] of e)
+    l[t] = s;
+  return l;
+}, ue = { class: "toolbar-wrap" }, xe = { class: "toolbar-icon-wrap" }, he = ["onClick"], ve = { class: "media-content" }, be = { class: "media-title" }, we = {
   key: 0,
   class: "sub-title"
-}, he = { class: "content" }, we = {
+}, ye = { class: "content" }, ge = {
   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, [
-          (v(!0), I(te, null, ne(i.state.media, (o, x) => (v(), I("span", {
-            key: x,
-            class: ie(["icon", { active: i.state.activeIndex === x, "is-rotate": o.view === "lanMobile" }]),
-            onClick: (a) => i.setViewPort(o)
+}, fe = { class: "content-wrap text-content" }, _e = { class: "title text-title" }, Ve = { class: "setting" };
+function Ce(m, e, l, t, s, p) {
+  const d = O("svg-icon"), u = O("tiny-popover"), c = O("tiny-input"), x = O("tiny-switch"), w = O("toolbar-base");
+  return L(), z(w, { options: l.options }, {
+    default: F(() => [
+      o("div", ue, [
+        o("div", xe, [
+          (L(!0), G(oe, null, le(t.state.media, (a, r) => (L(), G("span", {
+            key: r,
+            class: se(["icon", { active: t.state.activeIndex === r, "is-rotate": a.view === "lanMobile" }]),
+            onClick: (n) => t.setViewPort(a)
           }, [
-            g(b, {
+            j(u, {
               trigger: "hover",
               width: "260",
               "append-to-body": "",
               "open-delay": 1e3,
               "popper-class": "media-icon-popover"
             }, {
-              reference: c(() => [
-                g(u, {
-                  name: o.liked,
+              reference: F(() => [
+                j(d, {
+                  name: a.liked,
                   class: "media-icon"
                 }, null, 8, ["name"])
               ]),
-              default: c(() => [
-                t("div", me, [
-                  t("div", xe, [
-                    t("div", null, [
-                      D(r(o.title) + " ", 1),
-                      o.subTitle ? (v(), I("span", ve, [
-                        n[3] || (n[3] = D(" （")),
-                        o.view === "desktop" ? (v(), T(u, {
+              default: F(() => [
+                o("div", ve, [
+                  o("div", be, [
+                    o("div", null, [
+                      H(B(a.title) + " ", 1),
+                      a.subTitle ? (L(), G("span", we, [
+                        e[3] || (e[3] = H(" （")),
+                        a.view === "desktop" ? (L(), z(d, {
                           key: 0,
                           name: "stars"
-                        })) : W("", !0),
-                        t("span", null, r(o.subTitle), 1),
-                        n[4] || (n[4] = D("） "))
-                      ])) : W("", !0)
+                        })) : R("", !0),
+                        o("span", null, B(a.subTitle), 1),
+                        e[4] || (e[4] = H("） "))
+                      ])) : R("", !0)
                     ])
                   ]),
-                  t("div", he, r(o.content), 1)
+                  o("div", ye, B(a.content), 1)
                 ])
               ]),
               _: 2
             }, 1024)
-          ], 10, ue))), 128))
+          ], 10, he))), 128))
         ]),
-        d.isCanvas ? (v(), T(b, {
+        l.isCanvas ? (L(), z(u, {
           key: 0,
           width: "200",
           trigger: "click",
           "popper-class": "toolbar-media-popper"
         }, {
-          reference: c(() => [
-            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))
+          reference: F(() => [
+            o("span", ge, [
+              o("span", null, [
+                o("span", null, B(parseInt(t.state.width)), 1),
+                e[5] || (e[5] = o("span", { class: "symbol" }, "px", -1))
               ]),
-              t("span", null, [
-                t("span", null, r(i.scale.toFixed(2)), 1),
-                n[6] || (n[6] = t("span", { class: "symbol" }, "%", -1))
+              o("span", null, [
+                o("span", null, B(t.scale.toFixed(2)), 1),
+                e[6] || (e[6] = o("span", { class: "symbol" }, "%", -1))
               ])
             ])
           ]),
-          default: c(() => [
-            t("div", be, [
-              t("div", ye, r(i.state.textData.title), 1),
-              t("div", fe, [
-                t("div", null, [
-                  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
+          default: F(() => [
+            o("div", fe, [
+              o("div", _e, B(t.state.textData.title), 1),
+              o("div", Ve, [
+                o("div", null, [
+                  o("label", null, B(t.state.textData.width), 1),
+                  j(c, {
+                    modelValue: t.state.width,
+                    "onUpdate:modelValue": e[0] || (e[0] = (a) => t.state.width = a),
+                    onChange: t.widthChange
                   }, {
-                    suffix: c(() => n[7] || (n[7] = [
-                      t("span", null, "px", -1)
+                    suffix: F(() => e[7] || (e[7] = [
+                      o("span", null, "px", -1)
                     ])),
                     _: 1
                   }, 8, ["modelValue", "onChange"])
                 ]),
-                t("div", null, [
-                  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
+                o("div", null, [
+                  o("label", null, B(t.state.textData.scale), 1),
+                  j(c, {
+                    modelValue: t.state.scaleValue,
+                    "onUpdate:modelValue": e[1] || (e[1] = (a) => t.state.scaleValue = a),
+                    readonly: t.state.readonly,
+                    onChange: t.scaleChange
                   }, {
-                    suffix: c(() => n[8] || (n[8] = [
-                      t("span", null, "%", -1)
+                    suffix: F(() => e[8] || (e[8] = [
+                      o("span", null, "%", -1)
                     ])),
                     _: 1
                   }, 8, ["modelValue", "readonly", "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
+                o("div", null, [
+                  e[9] || (e[9] = o("label", null, B("自由布局"), -1)),
+                  j(x, {
+                    modelValue: t.isAbsolute,
+                    "onUpdate:modelValue": e[2] || (e[2] = (a) => t.isAbsolute = a),
+                    onChange: t.changeCanvasType
                   }, null, 8, ["modelValue", "onChange"])
                 ])
               ])
             ])
           ]),
           _: 1
-        })) : W("", !0)
+        })) : R("", !0)
       ])
     ]),
     _: 1
   }, 8, ["options"]);
 }
-const Ve = /* @__PURE__ */ re(de, [["render", ge], ["__scopeId", "data-v-9173161d"]]), ke = {
-  id: "engine.toolbars.media",
-  type: "toolbars",
-  title: "media",
-  options: {
-    icon: {
-      default: ""
-    },
-    renderType: "slot"
-  }
-}, Ne = {
-  ...ke,
-  entry: Ve
+const ke = /* @__PURE__ */ pe(me, [["render", Ce], ["__scopeId", "data-v-da625a27"]]), Ne = {
+  ...J,
+  entry: ke
 };
 export {
   Ne as default