@opentiny/tiny-engine-toolbar-media 2.6.0-alpha.9 → 2.6.0-rc.1

package/dist/index.js

@@ -1,25 +1,15 @@
 import "./style.css";
-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 = {
+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 = {
   components: {
-    TinyPopover: re,
-    TinyInput: ce,
-    TinySwitch: de,
-    ToolbarBase: U
+    TinyPopover: le,
+    TinyInput: ae,
+    TinySwitch: oe,
+    ToolbarBase: se
   },
   props: {
     data: {
@@ -35,15 +25,9 @@ const J = {
       default: () => ({})
     }
   },
-  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({
+  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: "",
@@ -52,909 +36,345 @@ const J = {
       viewWidth: null,
       moreData: {
         title: "添加大断点",
-        list: [{
-          icon: y(),
-          text: "1280px"
-        }, {
-          icon: y(),
-          text: "1440px"
-        }, {
-          icon: y(),
-          text: "1920px"
-        }],
+        list: [
+          {
+            icon: N(),
+            text: "1280px"
+          },
+          {
+            icon: N(),
+            text: "1440px"
+          },
+          {
+            icon: N(),
+            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."
-      }]
-    }), 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;
+      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;
       }, 1e3);
-    }, {
-      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
+    }, 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.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
+    }, 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.scaleChange"
-      },
-      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"
+    }, 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";
       },
-      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
-      })
+      { 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);
     });
-    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
+    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
     };
   }
-}, 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 = {
+}, 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"
-}, ye = { class: "content" }, ge = {
+}, he = { class: "content" }, we = {
   class: "reference-text",
   title: "画布设置"
-}, 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)
+}, 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)
           }, [
-            j(u, {
+            g(b, {
               trigger: "hover",
               width: "260",
               "append-to-body": "",
               "open-delay": 1e3,
               "popper-class": "media-icon-popover"
             }, {
-              reference: F(() => [
-                j(d, {
-                  name: a.liked,
+              reference: c(() => [
+                g(u, {
+                  name: o.liked,
                   class: "media-icon"
                 }, null, 8, ["name"])
               ]),
-              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, {
+              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, {
                           key: 0,
                           name: "stars"
-                        })) : R("", !0),
-                        o("span", null, B(a.subTitle), 1),
-                        e[4] || (e[4] = H("） "))
-                      ])) : R("", !0)
+                        })) : W("", !0),
+                        t("span", null, r(o.subTitle), 1),
+                        n[4] || (n[4] = D("） "))
+                      ])) : W("", !0)
                     ])
                   ]),
-                  o("div", ye, B(a.content), 1)
+                  t("div", he, r(o.content), 1)
                 ])
               ]),
               _: 2
             }, 1024)
-          ], 10, he))), 128))
+          ], 10, ue))), 128))
         ]),
-        l.isCanvas ? (L(), z(u, {
+        d.isCanvas ? (v(), T(b, {
           key: 0,
           width: "200",
           trigger: "click",
           "popper-class": "toolbar-media-popper"
         }, {
-          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))
+          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))
               ]),
-              o("span", null, [
-                o("span", null, B(t.scale.toFixed(2)), 1),
-                e[6] || (e[6] = o("span", { class: "symbol" }, "%", -1))
+              t("span", null, [
+                t("span", null, r(i.scale.toFixed(2)), 1),
+                n[6] || (n[6] = t("span", { class: "symbol" }, "%", -1))
               ])
             ])
           ]),
-          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
+          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
                   }, {
-                    suffix: F(() => e[7] || (e[7] = [
-                      o("span", null, "px", -1)
+                    suffix: c(() => n[7] || (n[7] = [
+                      t("span", null, "px", -1)
                     ])),
                     _: 1
                   }, 8, ["modelValue", "onChange"])
                 ]),
-                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
+                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
                   }, {
-                    suffix: F(() => e[8] || (e[8] = [
-                      o("span", null, "%", -1)
+                    suffix: c(() => n[8] || (n[8] = [
+                      t("span", null, "%", -1)
                     ])),
                     _: 1
                   }, 8, ["modelValue", "readonly", "onChange"])
                 ]),
-                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
+                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
-        })) : R("", !0)
+        })) : W("", !0)
       ])
     ]),
     _: 1
   }, 8, ["options"]);
 }
-const ke = /* @__PURE__ */ pe(me, [["render", Ce], ["__scopeId", "data-v-da625a27"]]), Ne = {
-  ...J,
-  entry: ke
+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
 };
 export {
   Ne as default