@opentiny/tiny-engine-toolbar-media 2.4.0 → 2.5.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 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 A } from "@opentiny/tiny-engine-meta-register";
-import { ToolbarBase as se } from "@opentiny/tiny-engine-common";
-const de = {
+import { useLayout as h, useCanvas as V, callEntry as C, useCompile as Q } from "@opentiny/tiny-engine-meta-register";
+import { ref as q, computed as X, reactive as ee, toRaw as te, watch as Y, watchEffect as ae, onMounted as ne, onUnmounted as ie, resolveComponent as $, createBlock as z, openBlock as O, withCtx as L, 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 U } 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 B } from "@opentiny/tiny-engine-common";
+const f = {
+  id: "engine.toolbars.media",
+  type: "toolbars",
+  title: "media",
+  options: {
+    icon: {
+      default: ""
+    },
+    renderType: "slot"
+  }
+}, ue = {
   components: {
-    TinyPopover: le,
-    TinyInput: ae,
-    TinySwitch: oe,
-    ToolbarBase: se
+    TinyPopover: re,
+    TinyInput: ce,
+    TinySwitch: de,
+    ToolbarBase: B
   },
   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 } = A().canvasApi.value, C = _((y == null ? void 0 : y()) === "absolute"), o = B(() => V().getDimension()), x = B(() => o.value.scale * 100), a = X({
+  setup(u, {
+    emit: e
+  }) {
+    let l = null, t = "", s = "";
+    const {
+      layoutState: p
+    } = h(), d = q(!1), m = q(!1), c = q(!1), {
+      getCanvasType: x
+    } = V().canvasApi.value, b = q((x == null ? void 0 : x()) === "absolute"), a = X(() => h().getDimension()), r = X(() => 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."
+      }]
+    }), k = C(() => {
+      m.value = !1;
+    }, {
+      metaData: {
+        id: `${f.id}.hide`
+      },
+      ctx: () => ({
+        props: u,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: m,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: b,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: k,
+        showTips: D,
+        hideTips: T,
+        showPopover: W,
+        hidePopover: I,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: _,
+        activeView: P,
+        breakpoints: E,
+        widthChange: N,
+        scaleChange: F,
+        changeCanvasType: S,
+        mode: M,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: V,
+        ToolbarBase: B
+      })
+    }), D = C(() => {
+      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), {}), E = (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: `${f.id}.showTips`
+      },
+      ctx: () => ({
+        props: u,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: m,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: b,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: k,
+        showTips: D,
+        hideTips: T,
+        showPopover: W,
+        hidePopover: I,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: _,
+        activeView: P,
+        breakpoints: E,
+        widthChange: N,
+        scaleChange: F,
+        changeCanvasType: S,
+        mode: M,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: V,
+        ToolbarBase: B
+      })
+    }), T = C(() => {
+      d.value = !1, clearTimeout(l);
+    }, {
+      metaData: {
+        id: `${f.id}.hideTips`
+      },
+      ctx: () => ({
+        props: u,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: m,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: b,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: k,
+        showTips: D,
+        hideTips: T,
+        showPopover: W,
+        hidePopover: I,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: _,
+        activeView: P,
+        breakpoints: E,
+        widthChange: N,
+        scaleChange: F,
+        changeCanvasType: S,
+        mode: M,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: V,
+        ToolbarBase: B
+      })
+    }), W = C(() => {
+      p.toolbars.visiblePopover = !0, c.value = !0;
+    }, {
+      metaData: {
+        id: `${f.id}.showPopover`
+      },
+      ctx: () => ({
+        props: u,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: m,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: b,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: k,
+        showTips: D,
+        hideTips: T,
+        showPopover: W,
+        hidePopover: I,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: _,
+        activeView: P,
+        breakpoints: E,
+        widthChange: N,
+        scaleChange: F,
+        changeCanvasType: S,
+        mode: M,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: V,
+        ToolbarBase: B
+      })
+    }), I = C(() => {
+      p.toolbars.visiblePopover = !1, c.value = !1;
+    }, {
+      metaData: {
+        id: `${f.id}.hidePopover`
+      },
+      ctx: () => ({
+        props: u,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: m,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: b,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: k,
+        showTips: D,
+        hideTips: T,
+        showPopover: W,
+        hidePopover: I,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: _,
+        activeView: P,
+        breakpoints: E,
+        widthChange: N,
+        scaleChange: F,
+        changeCanvasType: S,
+        mode: M,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: V,
+        ToolbarBase: B
+      })
+    }), g = C((i) => {
+      const w = document.querySelector(".reference-text"), A = w == null ? void 0 : w.contains(i.target);
+      w !== i.target && !A && (p.toolbars.visiblePopover = !1);
+    }, {
+      metaData: {
+        id: `${f.id}.closePopover`
+      },
+      ctx: () => ({
+        props: u,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: m,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: b,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: k,
+        showTips: D,
+        hideTips: T,
+        showPopover: W,
+        hidePopover: I,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: _,
+        activeView: P,
+        breakpoints: E,
+        widthChange: N,
+        scaleChange: F,
+        changeCanvasType: S,
+        mode: M,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: V,
+        ToolbarBase: B
+      })
+    }), v = n.media.reduce((i, w, A) => (i[w.view] = {
+      ...te(w),
+      index: A
+    }, i), {}), _ = C((i) => {
+      u.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: `${f.id}.setViewPort`
+      },
+      ctx: () => ({
+        props: u,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: m,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: b,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: k,
+        showTips: D,
+        hideTips: T,
+        showPopover: W,
+        hidePopover: I,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: _,
+        activeView: P,
+        breakpoints: E,
+        widthChange: N,
+        scaleChange: F,
+        changeCanvasType: S,
+        mode: M,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: V,
+        ToolbarBase: B
+      })
+    }), P = C((i, w) => {
+      const A = v[w];
+      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 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 = ((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+)?$/;
-      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: `${f.id}.activeView`
+      },
+      ctx: () => ({
+        props: u,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: m,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: b,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: k,
+        showTips: D,
+        hideTips: T,
+        showPopover: W,
+        hidePopover: I,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: _,
+        activeView: P,
+        breakpoints: E,
+        widthChange: N,
+        scaleChange: F,
+        changeCanvasType: S,
+        mode: M,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: V,
+        ToolbarBase: B
+      })
+    }), E = [{
+      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
+    }], N = C((i) => {
+      var J;
+      const w = /^\d+$/;
+      String(i).match(w) ? 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), Z = ((J = E.find((K) => K.min <= A && A <= K.max)) == null ? void 0 : J.type) || "desktop";
+      P(A, Z);
+    }, {
+      metaData: {
+        id: `${f.id}.widthChange`
+      },
+      ctx: () => ({
+        props: u,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: m,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: b,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: k,
+        showTips: D,
+        hideTips: T,
+        showPopover: W,
+        hidePopover: I,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: _,
+        activeView: P,
+        breakpoints: E,
+        widthChange: N,
+        scaleChange: F,
+        changeCanvasType: S,
+        mode: M,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: V,
+        ToolbarBase: B
+      })
+    }), F = C((i) => {
+      const w = 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(w.scale), n.scaleValue = Number(n.scaleValue).toFixed(2), h().setDimension({
+        scale: Number(n.scaleValue) / 100
       });
-    }, J = (e) => {
-      const { setCanvasType: l } = A().canvasApi.value;
-      l(e ? "absolute" : "normal");
-    };
-    M(
-      () => o.value.deviceType,
-      (e) => {
-        a.activeIndex = k[e].index, a.readonly = e !== "mdx";
+    }, {
+      metaData: {
+        id: `${f.id}.scaleChange`
       },
-      { immediate: !0 }
-    ), Z(() => {
-      a.scaleValue = x.value.toFixed(2), p = x.value;
-    }), M(
-      () => 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: u,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: m,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: b,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: k,
+        showTips: D,
+        hideTips: T,
+        showPopover: W,
+        hidePopover: I,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: _,
+        activeView: P,
+        breakpoints: E,
+        widthChange: N,
+        scaleChange: F,
+        changeCanvasType: S,
+        mode: M,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: V,
+        ToolbarBase: B
+      })
+    }), S = C((i) => {
+      const {
+        setCanvasType: w
+      } = V().canvasApi.value;
+      w(i ? "absolute" : "normal");
+    }, {
+      metaData: {
+        id: `${f.id}.changeCanvasType`
+      },
+      ctx: () => ({
+        props: u,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: m,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: b,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: k,
+        showTips: D,
+        hideTips: T,
+        showPopover: W,
+        hidePopover: I,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: _,
+        activeView: P,
+        breakpoints: E,
+        widthChange: N,
+        scaleChange: F,
+        changeCanvasType: S,
+        mode: M,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: V,
+        ToolbarBase: B
+      })
     });
-    const K = o.value.deviceType || "desktop";
-    return E(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: E,
-      showPopover: j,
-      hidePopover: q,
-      widthChange: G,
-      scaleChange: H,
-      isAbsolute: C,
-      changeCanvasType: J
+    Y(() => 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;
+    }), Y(() => a.value.width, (i) => {
+      const w = parseInt(i, 10);
+      Number.isInteger(w) && (n.width = w, t = w);
+    }), ne(C(C(() => {
+      document.addEventListener("click", g);
+    }, {
+      metaData: {
+        id: `${f.id}.onMounted[0]`
+      },
+      ctx: () => ({
+        props: u,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: m,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: b,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: k,
+        showTips: D,
+        hideTips: T,
+        showPopover: W,
+        hidePopover: I,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: _,
+        activeView: P,
+        breakpoints: E,
+        widthChange: N,
+        scaleChange: F,
+        changeCanvasType: S,
+        mode: M,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: V,
+        ToolbarBase: B
+      })
+    }), {
+      metaData: {
+        id: `${f.id}.onMounted[0]`
+      },
+      ctx: () => ({
+        props: u,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: m,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: b,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: k,
+        showTips: D,
+        hideTips: T,
+        showPopover: W,
+        hidePopover: I,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: _,
+        activeView: P,
+        breakpoints: E,
+        widthChange: N,
+        scaleChange: F,
+        changeCanvasType: S,
+        mode: M,
+        _callEntry: C,
+        _useCompile: Q,
+        _metaData: f,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: V,
+        ToolbarBase: B
+      })
+    })), ie(C(C(() => {
+      document.removeEventListener("click", g);
+    }, {
+      metaData: {
+        id: `${f.id}.onUnmounted[0]`
+      },
+      ctx: () => ({
+        props: u,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: m,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: b,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: k,
+        showTips: D,
+        hideTips: T,
+        showPopover: W,
+        hidePopover: I,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: _,
+        activeView: P,
+        breakpoints: E,
+        widthChange: N,
+        scaleChange: F,
+        changeCanvasType: S,
+        mode: M,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: V,
+        ToolbarBase: B
+      })
+    }), {
+      metaData: {
+        id: `${f.id}.onUnmounted[0]`
+      },
+      ctx: () => ({
+        props: u,
+        emit: e,
+        timer: l,
+        prevWidthVal: t,
+        prevScaleVal: s,
+        layoutState: p,
+        visible: d,
+        active: m,
+        flag: c,
+        getCanvasType: x,
+        isAbsolute: b,
+        dimension: a,
+        scale: r,
+        state: n,
+        hide: k,
+        showTips: D,
+        hideTips: T,
+        showPopover: W,
+        hidePopover: I,
+        closePopover: g,
+        mediaMap: v,
+        setViewPort: _,
+        activeView: P,
+        breakpoints: E,
+        widthChange: N,
+        scaleChange: F,
+        changeCanvasType: S,
+        mode: M,
+        _callEntry: C,
+        _useCompile: Q,
+        _metaData: f,
+        IconWebPlus: y,
+        useLayout: h,
+        useCanvas: V,
+        ToolbarBase: B
+      })
+    }));
+    const M = a.value.deviceType || "desktop";
+    return _(v[M]), {
+      scale: r,
+      state: n,
+      active: m,
+      flag: c,
+      hide: k,
+      layoutState: p,
+      visible: d,
+      showTips: D,
+      hideTips: T,
+      timer: l,
+      dimension: a,
+      setViewPort: _,
+      showPopover: W,
+      hidePopover: I,
+      widthChange: N,
+      scaleChange: F,
+      isAbsolute: b,
+      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 = (u, e) => {
+  const l = u.__vccOpts || u;
+  for (const [t, s] of e)
+    l[t] = s;
+  return l;
+}, me = { class: "toolbar-wrap" }, xe = { class: "toolbar-icon-wrap" }, he = ["onClick"], ve = { class: "media-content" }, we = { class: "media-title" }, be = {
   key: 0,
   class: "sub-title"
-}, he = { class: "content" }, we = {
+}, ye = { class: "content" }, fe = {
   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)
+}, ge = { class: "content-wrap text-content" }, _e = { class: "title text-title" }, Ve = { class: "setting" };
+function Ce(u, e, l, t, s, p) {
+  const d = $("svg-icon"), m = $("tiny-popover"), c = $("tiny-input"), x = $("tiny-switch"), b = $("toolbar-base");
+  return O(), z(b, { options: l.options }, {
+    default: L(() => [
+      o("div", me, [
+        o("div", xe, [
+          (O(!0), G(oe, null, le(t.state.media, (a, r) => (O(), 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(m, {
               trigger: "hover",
               width: "260",
               "append-to-body": "",
               "open-delay": 1e3,
               "popper-class": "media-icon-popover"
             }, {
-              reference: c(() => [
-                g(u, {
-                  name: o.liked,
+              reference: L(() => [
+                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: L(() => [
+                o("div", ve, [
+                  o("div", we, [
+                    o("div", null, [
+                      H(U(a.title) + " ", 1),
+                      a.subTitle ? (O(), G("span", be, [
+                        e[3] || (e[3] = H(" （")),
+                        a.view === "desktop" ? (O(), 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, U(a.subTitle), 1),
+                        e[4] || (e[4] = H("） "))
+                      ])) : R("", !0)
                     ])
                   ]),
-                  t("div", he, r(o.content), 1)
+                  o("div", ye, U(a.content), 1)
                 ])
               ]),
               _: 2
             }, 1024)
-          ], 10, ue))), 128))
+          ], 10, he))), 128))
         ]),
-        d.isCanvas ? (v(), T(b, {
+        l.isCanvas ? (O(), z(m, {
           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: L(() => [
+            o("span", fe, [
+              o("span", null, [
+                o("span", null, U(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, U(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: L(() => [
+            o("div", ge, [
+              o("div", _e, U(t.state.textData.title), 1),
+              o("div", Ve, [
+                o("div", null, [
+                  o("label", null, U(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: L(() => 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, U(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: L(() => 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, U("自由布局"), -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(ue, [["render", Ce], ["__scopeId", "data-v-eb53b829"]]), Ne = {
+  ...f,
+  entry: ke
 };
 export {
   Ne as default

package/dist/style.css

@@ -1 +1 @@
-.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)}
+.toolbar-wrap[data-v-eb53b829]{display:flex;align-items:center}.toolbar-wrap .reference-text[data-v-eb53b829]{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-eb53b829]:last-child{margin-left:8px}.toolbar-wrap .toolbar-icon-wrap[data-v-eb53b829]{display:flex;flex-wrap:nowrap;align-items:center;gap:6px}.toolbar-wrap .toolbar-icon-wrap .icon[data-v-eb53b829]{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-eb53b829]{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-eb53b829],.toolbar-wrap .toolbar-icon-wrap .icon[data-v-eb53b829]:hover{background:var(--te-toolbars-media-bg-color-active)}.toolbar-wrap .toolbar-icon-wrap .icon.active svg[data-v-eb53b829]{color:var(--te-toolbars-media-text-color-checked)}.toolbar-wrap .more-setting .setting-item[data-v-eb53b829]{display:flex;justify-content:space-between;padding:12px}.media-content[data-v-eb53b829]{line-height:18px}.media-content .media-title[data-v-eb53b829]{font-weight:600}.media-content .content[data-v-eb53b829]{color:var(--te-toolbars-media-text-color-secondary)}.setting-content[data-v-eb53b829]{padding:12px 8px}.content-wrap .title[data-v-eb53b829]{font-weight:600;margin-bottom:16px}.content-wrap .setting[data-v-eb53b829]{display:flex;flex-direction:column;gap:12px}.content-wrap .setting div[data-v-eb53b829]{display:flex;align-items:center;justify-content:space-between}.content-wrap .setting div label[data-v-eb53b829]{color:var(--te-toolbars-media-text-color-secondary);min-width:64px}.content-wrap .setting div[data-v-eb53b829]: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.4.0",
+  "version": "2.5.0-alpha.0",
   "publishConfig": {
     "access": "public"
   },
@@ -25,11 +25,11 @@
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
-    "@opentiny/tiny-engine-common": "2.4.0",
-    "@opentiny/tiny-engine-meta-register": "2.4.0"
+    "@opentiny/tiny-engine-common": "2.5.0-alpha.0",
+    "@opentiny/tiny-engine-meta-register": "2.5.0-alpha.0"
   },
   "devDependencies": {
-    "@opentiny/tiny-engine-vite-plugin-meta-comments": "2.4.0",
+    "@opentiny/tiny-engine-vite-plugin-meta-comments": "2.5.0-alpha.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": "477aa411da11a4f95712e3e5c251d97cae23f4ad"
+  "gitHead": "ae59c82734d79f650c9221cb9702714814b099c8"
 }