@opentiny/tiny-engine-toolbar-media 2.5.0-alpha.1 → 2.5.0-alpha.2

package/dist/index.js

@@ -1,25 +1,15 @@
 import "./style.css";
-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 = {
+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 = {
   components: {
-    TinyPopover: re,
-    TinyInput: ce,
-    TinySwitch: de,
-    ToolbarBase: B
+    TinyPopover: le,
+    TinyInput: ae,
+    TinySwitch: oe,
+    ToolbarBase: se
   },
   props: {
     data: {
@@ -35,15 +25,9 @@ const f = {
       default: () => ({})
     }
   },
-  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({
+  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({
       activeIndex: 0,
       guideValue: "",
       width: "",
@@ -52,909 +36,345 @@ const f = {
       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."
-      }]
-    }), 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;
+      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: `${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
+    }, 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}.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
+    }, 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}.scaleChange`
-      },
-      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`
+    }, 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";
       },
-      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
-      })
+      { 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);
     });
-    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
+    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
     };
   }
-}, 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 = {
+}, 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" }, fe = {
+}, he = { class: "content" }, we = {
   class: "reference-text",
   title: "画布设置"
-}, 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)
+}, 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(m, {
+            g(b, {
               trigger: "hover",
               width: "260",
               "append-to-body": "",
               "open-delay": 1e3,
               "popper-class": "media-icon-popover"
             }, {
-              reference: L(() => [
-                j(d, {
-                  name: a.liked,
+              reference: c(() => [
+                g(u, {
+                  name: o.liked,
                   class: "media-icon"
                 }, null, 8, ["name"])
               ]),
-              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, {
+              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, U(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, U(a.content), 1)
+                  t("div", he, r(o.content), 1)
                 ])
               ]),
               _: 2
             }, 1024)
-          ], 10, he))), 128))
+          ], 10, ue))), 128))
         ]),
-        l.isCanvas ? (O(), z(m, {
+        d.isCanvas ? (v(), T(b, {
           key: 0,
           width: "200",
           trigger: "click",
           "popper-class": "toolbar-media-popper"
         }, {
-          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))
+          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, U(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: 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
+          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: L(() => 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, 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
+                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: L(() => 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, U("自由布局"), -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(ue, [["render", Ce], ["__scopeId", "data-v-eb53b829"]]), Ne = {
-  ...f,
-  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

package/dist/style.css

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

package/package.json

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